我是这个网站和jQuery的新手。我不知道这是不是常识,但是我对这个帖子的提交按钮有问题:
jQuery click event just trigger once
但我的代码是这样的:
我的页面上有这样的表格:
<table border="1">
<tr><th>Song</th><th>Listen</th></tr>
<tr><td>Singer - Song </td>
<td><form class="frm" id="lis_0" name="name">
<input type="hidden" class="url" value="somelink" id="url_0" />
<input class="submit" type="submit" onmouseover="activate(this, 0)" onmouseout="deactivate(this, 0)" value="Listen" />
</form>
</td>
</tr>
<tr><td>Singer - Song </td>
<td><form class="frm" id="lis_1" name="name">
<input type="hidden" class="url" value="somelink" id="url_1" />
<input class="submit" type="submit" onmouseover="activate(this, 1)" onmouseout="deactivate(this, 1)" value="Listen" />
</form>
</td>
</tr>
....
....
</table>
我从这些表格中获取信息到下面的player.php
:
$('.submit').click(function(){
$.ajax({
type : "GET",
url : "player.php",
data : {"url" : $("#active").val() },
success : function(response){
alert(response);
$("#response div").fadeOut("fast", function(){
$("#response div").remove();
$("#response").append($(response).hide().fadeIn());
});
}
});
return false;
});
这个player.php
会返回一个div,如下所示:
'<div class="mp3player">
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">
AudioPlayer.embed("audioplayer_1", {
soundFile: "'.$file.'",
titles: "'.$title.'",
artists: "'.$artist.'",
autostart: "yes"
});
</script>
</div>'
在删除之前的那些之后,我将其添加到我的页面上的响应div。它运作良好,但我有另一个提交事件来搜索这些歌曲:
$('form[id^="search"]').submit(function(){
$.ajax({
type : "GET",
url : "search.php",
data : {"searchText" : $("#searchText").val() },
success : function(response){
$('div[id="results"]').fadeOut("fast", function(){
$('div[id="results"]').remove();
$("#leftcolumn").append($(response).hide().fadeIn());
});
}
});
return false;
});
当我从此表单在我的页面上搜索时:
<form class="search" id="searchForm" name="name">
<input type="text" value="" id="searchText" name="searchString" />
<input type="submit" value="Search" />
</form>
search.php
工作并用新结果替换我的表格。然后我的桌子的表格第二次不起作用
很抱歉这篇文章很长,但我不知道发布什么,不发布什么。非常感谢。
答案 0 :(得分:3)
如果您要替换.submit
元素,则首先使用$('.submit').click(function(){
定义的事件处理程序不会链接到任何现有元素。
为了让事件处理程序链接到任何'.submit'元素,包括创建的元素(这是你的search.php),你需要使用jquery on函数:
$('document').on('click', '.submit', function(){...})
这将适用于文件的所有'.submit'元素,即使是那些在通话时不存在的元素。
如果您可以定义选择器,则可能有比“文档”更精确的选择器。
答案 1 :(得分:0)
结果:
$('form[id^="lis"]').live('click' , '.submit', function(){
.live()
绑定解决了我的问题。如果要使用.on()
绑定,则加载ajax的内容不应与已与该函数绑定的内容相同。至少据我所知,这一点
http://jquery-howto.blogspot.com/2008/12/how-to-bind-events-to-ajax-loaded.html
谢谢大家