Question

我有这个表单http://jsfiddle.net/thiswolf/XDsSt/有四个相同的输入和按钮。问题是，每个部分都在数据库中更新自己的唯一数据，因此在更新时，重要的是提交按钮我点击更新数据库仅来自该部分的输入。

我的功能是

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

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

Answer 1

为每个输入按钮使用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>

<强>的Javascript ：

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

<强>的jsfiddle ：

http://jsfiddle.net/XDsSt/7/

Answer 2

获取该按钮所属的相应部分。然后访问其中的元素。您可以使用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

     });
});

示例：http://jsfiddle.net/XDsSt/8/

我建议您切换到jQuery on而不是live，因为它已被弃用。

Answer 3

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

<强> Demo

如果可能，请使用.live()而不是.on()，而{j}使用jquery 1.7+，因为live()已被弃用。

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

<强> Demo

Answer 4

如果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');
                      }
                   });
               });

如何将按钮事件与独特控件相关联？

4 个答案: