2

テキストボックスを含むテーブルをページに動的に追加するjQueryコントロールを設定しました。

追加部分は正常に機能しますが、テーブルのどこをクリックしても最後の削除機能が起動します...削除ボタンをクリックしたときにテーブルを削除したいだけです。

これを設定するためのより良い方法はありますか？

ありがとう

    var linkCounter = 1;

    $("#btnAddLink").click(function () {
        if (linkCounter > 10) {
            alert("Only 10 learning objectives allowed per page.");
            return false;
        }

      var newTextBoxDiv = $(document.createElement('div')).attr("id", 'link' + linkCounter);
        newTextBoxDiv.after().html(
            '<table>' +
                '<tr><td>' +
                '<label>URL: </label>' +
                '</td><td>' +
                '<input type="text" name="tbLinkUrl" style="width: 300px;"' +
                '" id="tbLinkUrl' + counter + '" value="" >' +
                '</td></tr><tr><td>' +
                '<label>Label: </label>' +
                '</td><td>' +
                '<input type="text" name="tbLinkLabel" style="width: 300px;"' +
                '" id="tbLinkLabel' + counter + '" value="" >' +
                '</td></tr></table>');
           newTextBoxDiv.Append.Html(
              '&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">').click(function () {
                  $(this).remove();
                  linkCounter--;
              });
        newTextBoxDiv.appendTo("#linksGroup");
        linkCounter++;
    });
4

3 に答える 3

1

次のようにクリックハンドラーを追加してみてください。

newTextBoxDiv.Append.Html(
          '&nbsp;&nbsp;<input type="button" id='removebutton' value="Remove" class="removeLink">');
$('#removebutton').click(function () {
              $('#mytable').remove();
              linkCounter--;
          });

テーブルに「mytable」のIDを指定します。

于 2013-03-26T14:39:12.813 に答える
1

jQueryの各関数呼び出しはjQueryオブジェクトを返すため、複数の呼び出しをつなぎ合わせることができます。しかし、それらはすべて元のオブジェクトに基づいています。

ここ：

newTextBoxDiv.append.html(
          '&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">').click(function () {
              $(this).remove();
              linkCounter--;
          });

タイプボタンの入力をdivに追加しています。ただし、ボタンではなく、 newTextBoxDiv要素にクリックイベントを設定します。

ボタンを作成し、クリック機能を追加してから、次のように追加します。

$('&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">')
    .click(function () {
              $(this).siblings('table').remove();
              linkCounter--;
    }).appendTo(newTextBoxDiv);
于 2013-03-26T14:41:14.153 に答える
1

削除クリックイベントバインディングをaddLinkイベントバインディングの外に移動しました。これで、本体から委任されます。以下の私の例では、イベントはクラス「removeLink」を持つすべての要素に委任されています。ボタンをクリックすると、その親が削除されます。

デモとして機能するように、いくつかの小さな変更を加えました。重要な部分は、下部のデリゲートです（onを使用）。

デモ

HTML：

<input id="btnAddLink" value="Click!" type="button" />

Javascript：

var linkCounter = 1;

$("#btnAddLink").click(function () {
    if (linkCounter > 10) {
        alert("Only 10 learning objectives allowed per page.");
        return false;
    }
    var newTextBoxDiv = $("<div>").attr("id", 'link' + linkCounter);
    $(this).after(newTextBoxDiv);
    newTextBoxDiv.html(
        '<table>' +
        '<tr><td>' +
        '<label>URL: </label>' +
        '</td><td>' +
        '<input type="text" name="tbLinkUrl" style="width: 300px;"' +
        '" id="tbLinkUrl' + linkCounter + '" value="" >' +
        '</td></tr><tr><td>' +
        '<label>Label: </label>' +
        '</td><td>' +
        '<input type="text" name="tbLinkLabel" style="width: 300px;"' +
        '" id="tbLinkLabel' + linkCounter + '" value="" >' +
        '</td></tr></table>');
    newTextBoxDiv.append('&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">');
    newTextBoxDiv.appendTo("#linksGroup");
    linkCounter++;
});

$('body').on('click','.removeLink',function(){
    $(this).parent().remove();
    linkCounter--;
});
于 2013-03-26T14:47:14.077 に答える