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添加元素，并且希望侦听器保持绑定到它们，那么您需要将这些侦听器附加到文档中不会更改的元素 - 如{{ 1}}。

e.g。

$(document)

您的代码的问题在于您通过执行$(document).on('click','button',function(e) { //your code here });然后将点击侦听器附加到它们来获取所有按钮。问题是，当你这样做时，你的按钮没有附加到文档上，因此没有附加点击监听器。

Answer 3

如果页面加载时不存在按钮。您可以使用$("button")来解决它。你必须通过其他东西（例如div）包围它并像这样做： $('div').on('click','button', function(){...})

Answer 4

您需要考虑两件事。

ONE - 包含在mootools中的jQuery。我很惊讶你正在使用的mootools版本的$函数给了我一个非常基本的jQuery函数。我尝试了更高版本的mootools，但仍然发生了同样的事情。我确信它根本不是jQuery而且mootools只是使用$ variable来实现它们的目的。 [可选：因此，您也可以考虑将jQuery定义为脚本中的另一个变量。]

所以，我在jsfiddle的外部资源中添加了最新jQuery的链接，然后就可以了。不要忘记在jsfiddle左侧展开外部资源。但是，如果mootools为了自己的目的使用$，那么jQuery肯定会覆盖它。请考虑将jQuery用作与$。

不同的变量

TWO - 使用AJAX请求的onSuccess函数。您调用AJAX请求，因此您必须等待一段时间让浏览器加载它，这取决于用户的互联网连接。所以，这就是我们使用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在$ variable上不会相互冲突。 $已经被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);
});

使jQuery函数与ajax调用一起工作

5 个答案: