jQuery .live()不能与click事件一起使用

Question

我有一个ajax日历，可以通过点击箭头更改月份。但是某种原因，click事件在live()方法中不起作用了。它以前能工作，但现在不行了。

如果我将live()替换为click()，它会起作用，但我需要live()方法。

假设

• 我正在使用最新版本的jQuery。
• 没有JS错误被抛出。
• HTML有效。
• a.x-btn选择器被找到（长度=2）。
• console.log('Got this far!') 正确触发。
• console.log('Sidebar Cal Clicked') 没有正确触发。
• 在Wordpress环境中运行。
• DOCTYPE设置为HTML5。

//ajax calendars
jQuery(document).ready(function($) {

    //sidebar
    $(function() {
        var s = $('#s-calendar'), p = s.closest('.widget');
        console.log('Got this far!');

        //prevent collapse
        p.css('min-height', p.height());

        s.find('a.x-btn').live('click', function(e) {
            console.log('Sidebar Cal Clicked');
            var d = $(this).attr('data-cal-date'), n = $(this).attr('data-nonce');
            var url = $(this).attr('data-ajaxurl');
            $.ajax({
                url:url,
                type:'POST',
                data:'action=wpcal&sidebar=true&_wpcal_nonce='+n+'&date='+d,
                success:function(data) {
                    s.fadeOut(500, function() {
                        s.html(data).fadeIn(500);
                    });

                }
            });
            return false;
        });

    });
});

答案

结果发现另一段JS代码导致了实时功能无法正常工作。live()方法需要事件传播才能正确工作。我在代码顶部有一小行JS，有时觉得很有用。

$('body a[href=#]').click(function(event) { event.preventDefault(); });

我使用这段代码来防止页面在单击无用链接时跳转。当单击具有href="#"的所有'A'标签时，它会停止传播。我将其删除后，一切正常。

此外，尽管jQuery文档中说live()方法不适用于DOM遍历，但使用jQuery 1.5.2，live()方法仍然适用于DOM遍历后。我还是按照文档进行了更改，但它确实有效！感谢大家的帮助！

- Chris

Answer 1

我认为这源于对s.find的预先评估。使用这段代码会给您带来不同的结果吗？

$('#s-calendar a.x-btn').live('click', function(e) {

- Eli

Answer 2

我怀疑这里可能有一些问题

s.find('a.x-btn')

现场点击不应该有任何问题。

- kobe

Answer 3

查看有关 live 的注意事项：http://api.jquery.com/live/#caveats

具体来说：
"不支持使用 DOM 遍历方法查找要发送到 .live() 的元素。相反，应该直接在选择器后调用 .live() 方法..."

- entropo

Answer 4

这可能是由于您有一个嵌套的文档准备好了吗？您能删除第二个吗？

//ajax calendars
jQuery(document).ready(function($) {

    //sidebar
    $(function() { // remove this one

- Eli

Answer 5

我认为问题出在这里：

s.find('a.x-btn')

它没有返回正确的元素。

- Headshota

Answer 6

对于 jQuery 版本大于 1.9, live() 函数已被移除。 可以尝试以下代码： $('#button_id').on('click', 'button_tag_type', function) 或者 $('body').on('click', '.Button_class', function)

- sap hegde

---

没错，如果你仍需要支持 jQuery 1.9 之前的代码，我建议使用 .delegate 函数：$(document).delegate('#button_id', 'click', function); - 要移除绑定，可以使用 .undelegate（使用与之前 .delegate 相同的参数调用它）。 - Matt