javascript - .nextAll 不适用于动态内容

Question

这是 post 请求中的代码块。 JSON 回复存储在“data”中

var a=data.Data.overview;
var b=data.Data.extras;
//summary
var result='';
result+='<div class="extra-upper-block">';
result+='<h5 class="extra-head"><i class="'+b[0].icon+' extra-head-icons"></i> '+b[0].category+'<i class="fa fa-pencil edit-prof"></i></h5>';
result+='<div class="extra-sub-block">';
if(b[0][0].summary!=null)
result+='<p id="profile-summary" class="extra-sub-block-summary">'+b[0][0].summary+'</p>';
result+='</div>';
result+='</div><hr class="extra-upper-block-separator">';
$('#profile-extras').append(result);

这很好用。现在我想点击<p>单击时的标记

<i class="'+b[0].icon+' extra-head-icons"></i>

这些是我尝试过的代码

$('.edit-prof').nextAll('.extra-sub-block-summary:first').click();

$('.edit-prof').nextAll('p:first').click();

$('.edit-prof').nextAll('div > .extra-sub-block-summary:first').click();

没有任何效果。为什么 p 没有被选中？我仅在加载动态内容后才执行脚本。

这是 fiddle http://jsfiddle.net/4pC3e/

Answer 1

你应该使用event delegation为此

$(document).on("click",".extra-sub-block-summary:first",function(){

});

事件委托(delegate)允许您将单个事件监听器附加到父元素，该事件监听器将为匹配选择器的所有子元素触发，无论这些子元素现在存在还是将来添加。

编辑

|您获取元素的方式是错误的。试试这个代码

$('.edit-prof').closest("h5").next(".extra-sub-block").find(".extra-sub-block-summary:first").click();

Fiddle