Question

我的jQuery代码：

var menu = 0;
var link = "";
var column = 2;

jQuery( document ).ready( function($) {
$('body').css('height', $(window).height());
$('body').css('width', 32 + (230*column));

$(".button").click(function(event) {
    event.preventDefault();
    link = $(this).find('a').attr("href");

    $("#menu").css({'left':event.pageX});
    $("#menu").css({'top':event.pageY});
    $("#menu").find('#gotosite').attr("href", link);
    $("#menu").slideDown();
    menu = 1;
});

$("#zamknij_menu").click(function(event) {
    event.preventDefault();
    $("#menu").slideUp();
    menu = 0;
});

$("#zbadaj_element").click(function(event) {
    event.preventDefault();
    $("#menu").slideUp();
    menu = 0;
    $("body").append("<div class=\"column\" id=\"" + column + "\">");
    $("#" + column).html('<img src="load.gif" alt="Please Wait" /><p>Loading... Please Wait</p>');
    $("#" + column).load("robotone.php?url=" + link);

    column++;
    $("body").append("</div>");
    $('body').css('width', 32 + (230*column));
});

$("#openhelp").click(function(event) {
    $("#legend").slideToggle('slow', function() {
    // Animation complete.
  });
});
});

此脚本将带有类列的div附加到body并加载到它的php文件中。此脚本适用于html文档，但不适用于此脚本添加的新列。你能救我吗？

Answer 1

动态添加的那些Sice Event Delegation。

示例：

$(document).on("eventname",'.selector', function(event,ele){
 //Your code goes here
});

http://api.jquery.com/on/

Answer 2

在绑定事件后向DOM添加新的HTML元素时，不会绑定这些新元素。 The jQuery .on function旨在解决此问题。它的工作方式略有不同。

DOM中的事件“冒泡”到其父元素（除非明确告知不要在代码中，您似乎没有这样做）。因此，当您“单击”一个元素时，您还“单击”其父元素，该元素的父元素，依此类推，一直到body元素，最后是document。因此，您还可以绑定到这些父元素以响应单击。

.on函数就是这样做的，并且包含一个过滤器，仅响应从特定选择器提供给该父元素的事件。因此，您可以绑定到公共父级，而不是绑定到子元素本身。 body或document通常用于此目的。像这样：

$(document).on('click', '.button', function () {
    // your event handling code
});

这绑定到document的click事件，但只有在事件的发起者属于类button时才响应该事件。最终结果与绑定到类button元素的click事件相同，但引擎盖下有两个明显不同：

您只在DOM上创建一个事件，而不是为类button的每个元素创建一个事件。如果您有许多元素，则可以提高性能。

此事件绑定后添加到DOM 的类button的任何元素仍受影响。只要他们是普通父母的孩子（在这种情况下，他们都是document的孩子），那么他们的事件仍会“冒泡”到那个父母。这通常被称为“延期事件”。从本质上讲，您可以添加所需的所有元素，但仍然会对它们进行响应。

Answer 3

你需要在每个事件中添加'on'，例如说

$(".button").on('click',function(event) {
    // code
});

按照这种方式

Answer 4

$(selector).click(...)仅将clickHandler附加到已存在的dom元素中，您应该使用$(selector).on('click', function(){...});将处理程序附加到稍后将插入的元素...

jQuery不适用于由ajax加载的页面

4 个答案: