1

したがって、クリックすると新しい行をテーブルに動的に挿入するボタンがあります。このテーブルから行を削除できるようにしたいので、jqueryの.on（）関数を使用して、各行の最後にあるspan要素にクリックハンドラーをアタッチしようとしています。スパンをクリックして1つのアイテムを削除すると、テーブル内のすべてのアイテムに対してクリックイベントが呼び出され、すべて削除されます。ハンドラーをクリックした行だけを呼び出すように接続するにはどうすればよいですか？これが私のコードです：

これがjsです

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
        $(this).each(function () {
            $('span[id*="tempmilestone"]').each(function () {
                alert("ON: " + $(this).attr("idx"));
                _milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
                buildMilestoneOutput(milestonesList);
            });
        });
    });

これで、どの行をクリックしても、すべての行のクリックイベントが発生します。私は何が間違っているのですか？ありがとう！！

.each（）関数を使用せずに、これをさまざまな方法で試しましたが、それでもテーブルのすべての行に対して起動します。たぶん、コードの残りの部分を表示すると、次のようになります。

最後に呼び出されるbuildMilestoneOutput関数は次のとおりです。

function buildMilestoneOutput(container) {
    container.innerHTML = "";
    alert("Length: " + _milestones.length);
    var s = "<table id='testscroll' style='width: 690px; padding: 10px;'><tr><td style='font-weight: bold;'>Title</td><td style='font-weight: bold;'>Description</td><td style='font-weight: bold;'>DueDate</td></tr>"
    for (var i = 0; i < _milestones.length; i++) {
        s += "<tr><td style='width: 300px; padding-bottom: 10px;'>" + _milestones[i].Title + "</td><td style='width: 350px; padding-bottom: 10px;'>" + _milestones[i].Description + "</td><td style='width: 30px; padding-bottom: 10px;'>" + _milestones[i].Name + "</td><td><span idx='" + i + "' style='margin-left: 5px; cursor: pointer;'  id='tempmilestone'>remove</span></td></tr>";
    }
    s += "</table>";
    container.innerHTML = s;
}

このオリジナルは、ユーザーが[マイルストーンの追加]ボタンをクリックすると呼び出されます。

$("#lbAddMilestone").click(function () {

        milestonesList.innerHTML = "";
        var newMilestone = new GoalMilestone();
        newMilestone.Title = "New Milestone";
        _milestones.push(newMilestone);
        buildMilestoneOutput(milestonesList);
        wireupMilestoneDeletes();

        return false;
    });

そしてここにwireupMilestoneDeletesがあります：

function wireupMilestoneDeletes() {


    $("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
        alert("ON: " + $(this).attr("idx"));
        _milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
        buildMilestoneOutput(milestonesList);
    });
}
4

3 に答える 3

2

2つは言うまでもなく、各ループは必要ありません。クリックされた特定のクリックのハンドラーを含み、実行<span>している任意のにクリックイベントをバインドします。したがって、これで十分です。id"tempmilestone" <span>

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function (e) {
    alert("ON: " + $(this).attr("idx"));
    _milestones = _milestones.slice(parseInt($(this).attr("idx"), 10));
    buildMilestoneOutput(milestonesList);
});
于 2012-10-22T14:00:35.793 に答える
1

わかりました...それで私はそれを理解しました。私はwireupMilestonesDelete（）関数をAddButtonクリックイベントの外に移動し、$（document）.ready関数のすぐ下に移動しました。これで機能します。新しい行を挿入するたびに、各行に新しいクリックイベントを追加していました。よかった！:)

于 2012-10-22T15:38:53.890 に答える
0

ここでは意味をなさない各ループを2倍使用しています。少なくとも、私が理解していることではありません...

代わりにこれを試してください：

$("#milestonesList").on('click', 'span[id*="tempmilestone"]', function(e) {
    $(this).each(function() {       
            alert("ON: " + $(this).attr("idx"));
               //(.......)    
    });
});​

jsfiddle

于 2012-10-22T13:56:55.583 に答える