0

jqueryクリックイベントで問題が発生しています。実際、私はテーブルにいくつかのtrを追加していました。私のコードを以下に示します。

HTMLコード：

 <table id="tblList">
            <thead>
                <tr><th>Country Name</th>
                    <th>CityName</th></tr>
            </thead>
            <tbody></tbody>
        </table>

JQUERYコード：

var rowsCount = $("#tblList tbody").find("tr").length; var table = "<tr><td>" + countryName + "</td><td>" + cityName + "</td></tr><tr><td colspan='2'><div id='divGridRow'><input type='button' value='add Zip Code' id='btn" + rowsCount + "' class='gridButton'/></div></td></tr>"; $('#tblList').append(table);

上記のコードは正常に機能しています。addZipCodeボタンをクリックしたときにダイアログを表示したいのですが。

ボタンIDを取得するためのコードを以下に記述しました。

 $("#tblList tbody").bind('click', function() {
    $(this).find("tr").bind('click', function() {
        $(this).find("input").bind('click', function() {
            console.log($(this).attr("id"));
        });
    });
});

ただし、ボタンIDを100％取得することはできません。上記のコードでは、もう1つの問題に直面しています。ボタンを最初にクリックすると、 console.logに値が表示されません。3回クリックすると、ボタンIDが1回だけ表示されます。4回クリックすると、ボタンIDが3回表示されます 。btn0btn0 btn0 をクリックすると、 5回目はボタンIDが表示されますこのような6回の アトーンbtn0btn0btn0 btn0 btn0 btn0

テーブルに複数の行を追加すると、行のすべてのボタンにbtn0、btn1、btn2.....のような一意のIDがあります。単純なクリックでボタンIDを取得しようとします。

解決策を見つけるのを手伝ってください。前もって感謝します。

jsfilddlehttp : //jsfiddle.net/umairnoor84/y25LW/で自分自身をチェックしてください

4

3 に答える 3

1

ボタン（クラスを持つ要素gridButton）のクリックハンドラーのみをバインドします。
これを試して：

$('#tblList .gridButton').click(function() {
    console.log($(this).attr("id"));
});

===更新===

行をに追加するのではなく、このテーブルtableのに追加する必要があります。 置換tbody

$('#tblList').append(table);

と

$('#tblList tbody').append(table);

===更新===

行は動的に追加されるため、コードを次のように変更する必要があります。

jQuery 1.7（ここではjsfiddle）：

$('body').on('click', '#tblList .gridButton', function() {
    console.log($(this).attr("id"));
});

jQuery 1.7より前（ここではjsfiddle）：

$('#tblList .gridButton').live('click', function() {
    console.log($(this).attr("id"));
});
于 2012-05-24T06:54:35.263 に答える
0

初めてtbodyをクリックすると、trのクリックイベントへのハンドラーがアタッチされます。次に、trをクリックすると、入力用のイベントをクリックするハンドラーがアタッチされます。クリックする回数が多いほど、ハンダーが付いている回数が多くなります。したがって、入力IDを出力するだけの場合は、次のようになります。

$("#tblList input").bind('click', function() {
    console.log($(this).attr("id"));
});

編集：

$("#tblList input").live('click', function() {
    console.log($(this).attr("id"));
});
于 2012-05-24T06:57:06.930 に答える
0

次回はjsfiddleを作ってください。それは人々が助けることをはるかに簡単にします。

問題は、クリックイベント内でクリックイベントをバインドすることです。これにより、クリックごとにクリックバインドのカスケードが発生します。ボタンの「クリック」イベントをバインドするだけです。

次に例を示します：http：//jsfiddle.net/cpMGQ/

編集：これがあなたがしたいことです：http：//jsfiddle.net/cpMGQ/1/

function addRow(country, city, rowCount) {
    var table = "<tr><td>" + country+ "</td><td>"
        + city + "</td></tr>" 
        + "<tr><td colspan='2'><div id='divGridRow'><input type='button' value='add Zip Code' id='btn" 
        + rowCount + "' class='gridButton'/></div></td></tr>";

    $('#tblList').append(table);

    $('#btn' + rowCount).click(function () {
        console.log($(this).attr("id"));    
    });
}

addRow("country 1", "city 1", 1);
addRow("country 2", "city 2", 2);
于 2012-05-24T07:06:07.583 に答える