Javascript 如何将按钮事件与唯一控件关联？_Javascript_Jquery_Html

Javascript 如何将按钮事件与唯一控件关联？

javascript jquery html

Javascript 如何将按钮事件与唯一控件关联？,javascript,jquery,html,Javascript,Jquery,Html,我的表单有四个相同的输入和按钮。问题是，每个部分都会更新数据库中自己独特的数据，因此在更新时，重要的是我单击“提交”按钮仅使用该部分的输入更新数据库我的职能是 $(document).ready(function() { $(".xx").live('click', function(){ alert('clicked'); }); }); 如何确保按钮单击对该部分是唯一的？为每个输入按钮使用ID值。通过这种方式，jQu

我的表单有四个相同的输入和按钮。问题是，每个部分都会更新数据库中自己独特的数据，因此在更新时，重要的是我单击“提交”按钮仅使用该部分的输入更新数据库

我的职能是

$(document).ready(function() {
          $(".xx").live('click', function(){
         alert('clicked');
         });
        });

如何确保按钮单击对该部分是唯一的？

为每个输入按钮使用ID值。通过这种方式，jQuery可以像这样识别它：

$('#button_tag');

HTML：

<html>
    <head></head>
    <body>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn1" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn2" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn3" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn4" type="submit" class="xx" value="Submit">
        </section>
    </body>

</html>

$(document).ready(function () {
    $(".xx").live('click', function () {
        alert('clicked ' + $(this).attr('id'));
    });
});

JsFiddle：

<html>
    <head></head>
    <body>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn1" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn2" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn3" type="submit" class="xx" value="Submit">
        </section>
        <section>
            <input type="text" value="Town">
            <input type="text" value="Mayor">
            <input type="text" value="Highway">
            <input id="btn4" type="submit" class="xx" value="Submit">
        </section>
    </body>

</html>

$(document).ready(function () {
    $(".xx").live('click', function () {
        alert('clicked ' + $(this).attr('id'));
    });
});

获取按钮所属的相应部分。然后访问其中的元素。您可以使用jQuery

closest（）

parent（）

（如果只有一层控件层次结构）函数来实现该功能

$(document).ready(function() {
     $(".xx").live('click', function(e){
       e.preventDefault();  //if you want to prevent normal form submit
       var item=$(this);
       var sectionClicked=item.closest("section");
       //Let's alert the first text box   
       alert(sectionClicked.find("input").first().val());
       //do whatever with the items belongs the current section

     });
});

样本：

我建议您切换到jQuery，而不是

live

，因为它已被弃用

$(document).ready(function() {
    $(".xx").live('click', function() {
        $('section').has(this).find(':input:text').each(function() {
            alert( this.value )            ;
        });
    });
});

$(document).ready(function() {
    $("body").on('click', '.xx', function() {
        $('section').has(this).find(':input:text').each(function() {
            alert( this.value )            ;
        });
    });
});

如果可能的话，请在jQUery 1.7+中使用

.on（）

，而不是

.live（）

，因为

live（）

已被弃用

$(document).ready(function() {
    $(".xx").live('click', function() {
        $('section').has(this).find(':input:text').each(function() {
            alert( this.value )            ;
        });
    });
});

$(document).ready(function() {
    $("body").on('click', '.xx', function() {
        $('section').has(this).find(':input:text').each(function() {
            alert( this.value )            ;
        });
    });
});

如果id不是一个选项-我不理解这一点，但您可以在按钮中放置多个类

           <input type="button" class="xx btn1" ... >

           $(document).ready(function() {
                $(".xx").live('click', function(){   // look into on instead on live
                 if $(this).hasclass('btn1');{
                 alert('clicked');
                      }
                   });
               });


$（文档）.ready（函数（）{
$（“.xx”）.live（'click'，function（）{//在live上查看
如果$（this）.hasclass（'btn1'）{
警报（“点击”）；
}
});
});