2

我是这个网站和 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有效并用新结果替换了我的表格。然后我的表格第二次不起作用。
对不起，很长的帖子，但我不知道要发布什么，不应该发布什么。非常感谢。

4

2 回答 2

3

如果您要替换.submit元素，则您首先定义的事件处理程序$('.submit').click(function(){不会链接到任何现有元素。

为了让事件处理程序链接到任何 '.submit' 元素，包括后期创建的元素（这是您的 search.php），您需要使用jquery on函数：

$('document').on('click', '.submit', function(){...})

这将适用于文档的所有“.submit”元素，即使是在调用时不存在的元素。

如果你可以定义一个，你可能有一个比“文档”更精确的选择器。

于 2012-08-24T18:00:27.937 回答
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
谢谢大家

于 2012-08-25T00:36:50.983 回答