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 系统。当管理员在接收者输入区域写入用户名时，脚本会建议一些用户名。

<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()完全依赖于事件委托(delegate)。

这意味着只有那些成功从单击的元素中冒泡的事件，直到 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 之前的同一输入元素。元素。当然，这会在您点击的任何地方触发，因此它可能不是您想要的。