Jquery Live点击功能不起作用

Question

我遇到了Jquery live函数的问题.我正在动态添加数据,所以我必须使用实时函数才能点击动态添加的元素.

$("a.pm_member").live("click", function(){
    alert('clicked');
});

数据添加正确.没有错误消息,但它不显示警报窗口.

如果有人能帮我解决这个问题,我将很高兴.

编辑:

我想提供更多细节.

这就是我在页面中使用的内容;

<script>
new TINY.editor.edit('editor',{
    id:'tiny_input',
    height:200,
    cssclass:'te',
    controlclass:'tecontrol',
    rowclass:'teheader',
    dividerclass:'tedivider',
    controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
              'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
              'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n','image','hr','link','unlink','|','cut','copy','paste','print','|','font','size','style'],
    footer:false,
    fonts:['Arial','Verdana','Georgia','Trebuchet MS'],
    xhtml:true,
    cssfile:'style.css',
    bodyid:'editor',
    footerclass:'tefooter',
    toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggler'},
    resize:{cssclass:'resize'}
});

$('button#post').click(function () {
    editor.post();
});

$('#suggestions').hide();

function hideSuggestions () {
    $('#suggestions').hide();
}

$("a.pm_member").live("click", function(){
    alert('clicked');
});
</script>

这是一个PM系统.当admin在接收器输入区域中写入用户名时,脚本会建议一些用户名.

<input type="text" name="userName" class="medium" maxlength="100" onkeyup="findMember(this.value);" onblur="hideSuggestions();" onfocus="findMember(this.value);"/>
<div id="suggestions"></div>

index.php中包含的页面超过1页.我可以在任何其他页面中使用.live()函数而不会出现任何问题,但不能在send-pm.php中使用.

我很困惑如何调试它以及如何解决它.

.bind(),. live(),. find()它只是不起作用.

以下元素是动态添加的;

<div class="flat_area grid_8 searchresults">
<h2 class="box_head grad_colour round_top">Member Suggestions</h2>
<div class="block">
<ul class="full_width">
<li>
<strong>Username: </strong> <a href="#" id="{$found->id}" class="pm_member">{$found->username}</a><br />
<strong>Full Name: </strong> {$found->fullName}<br /> 
<strong>Email: </strong>{$email}
</li>
<li>Total <strong>{$totalRecords}</strong> records found.</li>
</ul>
</div>
</div>

任何想法如何调试呢？

编辑2:

我甚至尝试在添加jquery和jquery ui文件之后在元素之间添加以下代码.

<!-- Load JQuery -->        
<script type="text/javascript" src="includes/js/jquery-1.5.1.min.js"></script>
<!-- Load JQuery UI -->
<script type="text/javascript" src="includes/js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(document).ready(function() {
    $("a.pm_member").live("click", function(){
        alert('clicked');
    });
});
</script>

如果这是关于一些Jquery代码制动它,不应该修复它(虽然我对Jquery不太好).

编辑3:

我的功能是找到会员

function findMember (inputString) {
    if(inputString.length == 0) {
      $('#suggestions').fadeOut(); // Hide the suggestions box
   } else {
      $.get(siteUrl + "includes/ajax/profile.php?do=find-member", {username: ""+inputString+""}, function(data) { // Do an AJAX call
         $('#suggestions').fadeIn(); // Show the suggestions box
         $('#suggestions').html(data); // Fill the suggestions box
      });
   }
 }

再次感谢您的帮助和关注.

Answer 1

如果你有click在处理任何你的祖先"a.pm_member"是做元素return false;或者event.stopPropagation(),它会杀死.live().

这是因为.live()完全依赖于事件委托.

这意味着只有那些从点击的元素成功冒泡的事件document才能被分析,.live()并且可能被调用.

如果某个祖先暂停了该事件,则该.live()处理程序将永远不会看到该事件.

编辑:

这是一个祖先的示例,其中分配了一个阻止冒泡的处理程序.

示例: http ://jsfiddle.net/aBtDJ/

删除阻止冒泡的.live()处理程序会导致处理程序再次运行.

示例: http ://jsfiddle.net/aBtDJ/1/

编辑:

具体问题是onblur="hideSuggestions()"在<input>元素之前的#suggestions元素上有内联.

当您单击任何位置时,这似乎用于删除对话框.因此,blur事件发生在之前click,因此它永远不会注册.

这个问题没有一个完美的解决方案.无论怎样,blur都会在点击之前发生.

一种可能性是使用mousedown事件,这应该发生在之前blur.当然,这不是一个完整的点击,但它可能已经足够了.

我个人使用.delegate()而不是.live(),但要么会工作.这是一个.delegate()例子:

$('#suggestions').delegate('a.pm_member', 'mousedown', function() {
    // your code
});

另一种可能性是将代码分配给元素之前的相同输入suggestions元素.当然这会触发你点击的任何地方,所以它可能不是你想要的.