Question

我设置了一个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++;
    });

Answer 1

尝试添加点击处理程序，如下所示：

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

并给你的表一个'mytable'的id。

Answer 2

jQuery中的每个函数调用都返回一个jQuery对象，这就是为什么你可以将多个调用串在一起的原因。但它们都是基于原始对象：

这里：

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

您正在向div添加类型按钮的输入。但是你要在newTextBoxDiv元素上设置click事件，而不是按钮。

创建按钮，添加点击功能，然后追加它：

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

Answer 3

我已将移除点击事件绑定移到addLink事件绑定之外。它现在由身体委派。在下面的示例中，事件被委托给具有“removeLink”类的所有元素。单击该按钮将删除它的父级。

我做了一些小改动，使其作为演示工作。重要的部分是底部的代表（使用上）。

Demo

<强> 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--;
});

动态地向页面添加元素然后删除它们

3 个答案: