使用加载了Ajax内容的jQuery“click”函数？

I have the contents of a php file loaded via Ajax that contains HTML and JavaScript. I have a button:

我有通过Ajax加载的php文件的内容,其中包含HTML和JavaScript。我有一个按钮:

<button class="search_button">Search</button>

And I have a script underneath that will update the documents hash from a jQuery function

我在下面有一个脚本,它将从jQuery函数更新文档哈希

<script type="text/javascript">
  $(".search_button").click(function() {
    var searchTerm = $('#search_box').val();         
    document.location.hash="searchTerm";
    return false;
  });
</script>

This code works when I run the php file separately, but when loading this page from an Ajax call, the function no longer runs. In firebug the script is not present so I am assuming I cannot load a script in using this method. I tried also putting the JavaScript snippet instead a header for the whole website, but this failed also.

当我单独运行php文件时,此代码有效,但是当从Ajax调用加载此页面时,该函数不再运行。在firebug中,脚本不存在所以我假设我无法使用此方法加载脚本。我还尝试将JavaScript代码段改为整个网站的标题,但这也失败了。

I was also thinking perhaps the function has to be declared when there is a search_button class already present, but it was structured in this way when I previously had them in one file (that was retrieved via Ajax) to no avail so I'm confused as to the problem.

我也在考虑当有一个search_button类已经存在时,可能必须声明该函数,但是当我以前将它们放在一个文件中时(通过Ajax检索)它是以这种方式构造的,但是没有用,所以我很困惑至于问题。

3 个解决方案

#1

You can include it globally with a live event:

您可以通过直播活动在全球范围内添加:

  $(".search_button").live('click', function() {
    var searchTerm = $('#search_box').val();         
    document.location.hash="searchTerm";
    return false;
  });

jQuery will automatically evaluate script blocks, you cannot see the function in the HTML because it has been stripped out. However it should have already run. The problem is most likely timing. You could do something like

jQuery会自动评估脚本块,你无法在HTML中看到该功能,因为它已被剥离。但它应该已经运行了。问题很可能是时机问题。你可以做点什么

setTimeout(function(){  
    $(".search_button").click(function() {
        var searchTerm = $('#search_box').val();         
        document.location.hash="searchTerm";
        return false;
    });
}, 500);

So that when the script is loaded it waits to be executed (hopefully giving jquery time to update the DOM with the new element).

因此,当脚本加载时,它等待执行(希望给jquery时间用新元素更新DOM)。

#2

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

从jQuery 1.7开始,不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应该使用.delegate()而不是.live()。

This method provides a means to attach delegated event handlers to the document element of a page, which simplifies the use of event handlers when content is dynamically added to a page. See the discussion of direct versus delegated events in the .on() method for more information.

此方法提供了将委托事件处理程序附加到页面的文档元素的方法,这可以在将内容动态添加到页面时简化事件处理程序的使用。有关详细信息,请参阅.on()方法中有关直接事件与委派事件的讨论。

Rewriting the .live() method in terms of its successors is straightforward; these are templates for equivalent calls for all three event attachment methods:

根据其后继者重写.live()方法很简单;这些是用于所有三种事件附件方法的等效调用的模板:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

Example usage of .on() to bind click event

使用.on()绑定click事件的示例

$(document).on("click", "#post a", function(){
    alert("1");
})

#3

Try to add the script inside a function

尝试在函数内添加脚本


function name(){
  $(".search_button").click(function() {
    var searchTerm = $('#search_box').val();         
    document.location.hash="searchTerm";
    return false;
  });
}

and call this function just after the end of the ajax call.

并在ajax调用结束后调用此函数。


$(document).ready(function() {
 name();
});

#1