jQuery没有添加额外的插件：当具有特定类的元素被添加到DOM时触发事件

Question

使用jQuery：我希望在具有特定类的元素添加到页面时进行侦听。当这个事件发生时，我会做一些逻辑（在这个例子中用警告信息表示）。

$('button').on('click', function(){
  $(this).after('<p class="foobar">Element added</p>');  
});



//Doesn't work, but shows what I am going after. I want to listen for when a p element with the class 'foobar' gets added to the DOM.  When this happens: I want to be able to throw an alert.

//  $('p.foobar').on('when_it_is_added', function(){
//    alert("I have been added to the dom");
//  });

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

<button>click to add a p element </button>

关键细节是我需要在这个动态<p>元素上使用事件监听器，并且我需要在DOM中加载事件后触发事件。

Answer 1

实现这一目标的最快方法是创建自己的事件并在将“p”元素追加到dom后自行触发...或者在附加到dom后执行另一个函数。

示例1：

//Here I'm going to create an event 'tagAdded' and trigger it after appending element..

$('button').on('click', function(){
  $(this).after('<p class="foobar">Element added</p>').trigger('tagAdded');  
});

然后

$('button').on('tagAdded', function(){

//do something

})

或

追加后调用方法..

示例2：

$('button').on('click', function(){

  $(this).after('<p class="foobar">Element added</p>');

  someMethod();
});

function someMethod(){
var newPtAG = $('body').find('.foobar');

}

link：http://codepen.io/theConstructor/pen/GqpQqY

希望这有帮助