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

时间:2016-06-07 17:22:57

标签: javascript jquery

使用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中加载事件后触发事件。

1 个答案:

答案 0 :(得分:0)

实现这一目标的最快方法是创建自己的事件并在将“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

希望这有帮助