使jQuery函数与Ajax调用一起使用

Question

单击按钮时，我正在尝试实现某些目标。 该按钮是使用AJAX调用从服务器加载的。 但是，单击按钮时什么也没有发生。 这是我的代码：

（此ajax调用位于JS Fiddle中-仅用于测试目的） JS Fiddle

码：

<div id="target"></div>

new Request.HTML({
    url: '/echo/html/',
    data: {
        html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
        delay: 0
    },
    method: 'post',
    update: 'target'
}).send();

$("button").click(function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});

Answer 1

由于按钮尚不存在，您可以使用jQuery.on委托事件处理程序。

$("body").on('click', 'button', function(){
  var value = $(this).siblings(".title").text();
  value += $(this).siblings(".date").text();
  alert(value); 
});

另外，由于您同时使用jQuery和MooTools，而仅加载MooTools，因此您的提琴不起作用。

---

在看到作者页面后添加：

var value = $(this).siblings(".title").text(); 选择器将不起作用。 我建议将event类（如日历事件中）添加到包装器并使用：

var value = $(this).parents(".event").find(".title").text();

Answer 2

如果要通过AJAX（或任何其他方法）将元素添加到DOM，并且希望侦听器保持绑定到它们，则需要将这些侦听器附加到文档中不变的元素上，例如$(document) 。

例如

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

代码的问题在于，通过执行$("button")然后将单击侦听器附加到它们来获取所有按钮。 问题在于，执行此操作时，您的按钮尚未附加到文档，因此不会在其上附加单击侦听器。

Answer 3

页面加载时按钮是否不存在。 您不能使用$("button")来解决它。 您必须用其他东西将其包围（例如div），然后像这样： $('div').on('click','button', function(){...})

Answer 4

您需要考虑两件事。

一个-mootools附带的jQuery。 我很惊讶您正在使用的mootools版本中的$函数给了我一个非常基本的jQuery函数。 我尝试了更高版本的mootools，但仍然发生了同样的情况。 我确信它根本不是jQuery，而mootools只是使用$变量来达到目的。 [可选：因此，您也可以考虑在脚本中将jQuery定义为其他变量。]

因此，我在jsfiddle的《外部资源》中添加了指向最新jQuery的链接，然后它起作用了。 不要忘记在jsfiddle左侧展开外部资源。 但是，如果mootools将$用于其用途，那么jQuery肯定会覆盖它。 请考虑使用jQuery作为不同于$的变量。

二-使用AJAX请求的onSuccess函数。 您调用了AJAX请求，因此必须等待一段时间才能让浏览器加载它，具体取决于用户的Internet连接。 因此，这就是为什么我们使用onError和onSuccess事件。 在onSuccess中编写按钮功能，因为在加载AJAX之前，文档上不存在按钮。

请检查此代码，它可以工作。

http://jsfiddle.net/U7ewu/代码：

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    $("button").click(function(){
        var value = $(this).siblings(".title").text();
        value += $(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

编辑：

请使用$ .noConflict（）; 这样，mootools和jquery就不会在$变量上发生冲突。 $已被Mootols使用，因此请改用jQuery。

请检查此jsfiddle。 http://jsfiddle.net/wkMep/

码：

$.noConflict();

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    jQuery("button").click(function(){
        var value = jQuery(this).siblings(".title").text();
        value += jQuery(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

Answer 5

尝试这个

$("button").on("click",function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});