2

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

我的功能是

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

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

4

4 回答 4

8

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

于 2012-07-20T17:03:27.977 回答
1

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

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

于 2012-07-20T17:08:25.510 回答
1 
$(document).ready(function() {
    $(".xx").live('click', function() {
        $('section').has(this).find(':input:text').each(function() {
            alert( this.value )            ;
        });
    });
});

演示

如果可能，请.live()使用.on()jQUery 1.7+ 代替 ，因为live()已弃用。

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

演示

于 2012-07-20T17:11:39.847 回答
0

如果 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');
                      }
                   });
               });
于 2012-07-20T17:14:15.613 回答