Jquery Live点击功能不起作用

时间:2011-07-15 16:39:39

标签: jquery click live

我遇到了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
      });
   }
 }

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

2 个答案:

答案 0 :(得分:7)

如果您的click元素的 <{1>}元素的 "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元素之前的同一输入元素。当然这会触发你点击的任何地方,所以它可能不是你想要的。

答案 1 :(得分:0)

尝试使用bind()而不是live(), 如果这不起作用,我建议使用find()

示例 if parentClass是类pm_member

的父类

使用此

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

供find()参考 - &gt; http://api.jquery.com/find/ 供参考bind() - &gt; http://api.jquery.com/bind/