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

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

尝试像这样添加点击处理程序：

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

我已将您的删除单击事件绑定移到 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 回答