我遇到了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
});
}
}
再次感谢您的帮助和关注。
答案 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/