2

私はこのフォームhttp://jsfiddle.net/thiswolf/XDsSt/を4つの同一の入力とボタンで持っています.問題は、各セクションがデータベース内の独自のデータを更新するため、更新時に送信ボタンをクリックすることが重要です.そのセクションからの入力のみを含むデータベース。

私の機能は

$(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 
$(document).ready(function() {
    $(".xx").live('click', function() {
        $('section').has(this).find(':input:text').each(function() {
            alert( this.value )            ;
        });
    });
});

デモ

可能であれば、の代わりに、 jQUery1.7以降.live()で使用してください。これは非推奨です。.on()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 に答える
1

ボタンが属する対応するセクションを取得します。次に、その中の要素にアクセスします。そのためにjQuery closest()/ parent()（コントロールの階層の1つのレイヤーのみの場合）関数を使用できます。

$(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/

on非推奨になっているため、代わりにjQueryに切り替えることをお勧めしますlive。

于 2012-07-20T17:08:25.510 に答える
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 に答える