使用jQuery

Question

我知道如何在jQuery上使用evenet Delegation。要收听动态添加的元素，我必须使用以下..

$('body .some-class').on('click', '.dynamically_added_ele', function(){});

我理解得很清楚。来实际问题。假设我有一个按钮和DOM元素，我想动态地添加到文档中。

<button class="my-button">Click Me</button>
var newDom = '<p class="new-dom">Hello there I am new content</p>';

现在我在按钮上绑定click事件以创建新元素

var allow = true;
$('.my-button').on('click', function(){
    var newDom = '<p class="new-dom">Hello there I am new content</p>';
    if( allow ) {
       $(this).after($(newDom));
    } else {
        $(newDom).remove(); // Not removing the new added element. Can't target that newly added element
    }
    allow = false;
});

变量 allow将检查为true，然后jQuery将创建该元素，最后allow变量将为false。再次使用时，单击该按钮将允许false，那时jQuery应该删除新添加的元素。但在这里我遇到了问题。我无法删除像我上面编码的新添加的元素。

我现在能做什么？

Answer 1

我必须像这样使用类选择器

<table>
  <tr>
    <th>COMPANY</th>
    <th>CONTACT</th>
    <th>COUNTRY</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Answer 2

也许是这样的：

var allow = true;
var newDom = $('<p class="new-dom">Hello there I am new content</p>');

$('.my-button').on('click', function(){
    if( allow ) {
       $(this).after(newDom);
       allow = false;
    } else {
        newDom.remove();
        allow = true;
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<button class="my-button">Click Me</button>