无法让(这个)jQuery 选择器工作

Posted

技术标签:

【中文标题】无法让(这个)jQuery 选择器工作【英文标题】:Can't get (this) jQuery selector working 【发布时间】:2016-04-30 21:13:25 【问题描述】:

我的页面上有一个名为“a.add_mycrate”的重复类。 此脚本仅针对单击的实例 (this) 并对其进行处理。

这是我的 JS:

jQuery(document).ready(function()
jQuery(document).on('click', "a.add_mycrate", function(event) 
    event.preventDefault();

    var title = jQuery(this).attr('data-title');
    var artwork = jQuery(this).attr('data-artwork');
    var stream = jQuery(this).attr('data-stream');
    var download = jQuery(this).attr('data-download');

    var data = 
                'action': 'addToCrate',
                'security': jQuery( '#crate-nonce' ).val(),
                'podtitle' : title,
                'podartwork' : artwork,
                'podstream' : stream,
                'podsave' : download
               ;                  

    jQuery.post(myCrate.ajaxurl, data, function(response) 

        jQuery('a.add_mycrate', this).html(response);

        alert(response);
    );              
  );
);

这就是页面上实际链接的呈现方式(如果有帮助的话):

<a class="add_mycrate" href="#" data-title="Title Goes Here" data-artwork="artwork.jpg" data-stream="myfile.mp3" data-download="link/to/download">Add To Crate</a>

(this) 选择器在获取 var 的数据时工作正常,但我无法在“a.add_mycrate”的目标 (this) 实例的响应中获取代码。这是我遇到问题的线路:

jQuery('a.add_mycrate', this).html(response);

我知道我一定是做错了,但是我在这里环顾四周所尝试的所有方法都不起作用。有什么建议吗?

附:与问题无关,但我使用的是“jQuery”而不是“$”,因为它正在 wordpress 网站上运行,以防有人想知道。

【问题讨论】:

【参考方案1】:

几个问题:

$.post 回调中的this 并不是你想象的那样。它具有与外部事件处理程序中的this 不同的范围上下文。 在 ajax 外部存储对 this 的引用以在其中使用

var $this = jQuery(this);
jQuery.post(myCrate.ajaxurl, data, function(response) 
        $this.html(response);
);

这也将解决以下问题:

jQuery('a.add_mycrate', this).html(response);

第二个参数是“上下文”。如果您假设 this 是元素,则上下文参数使其与:

jQuery(this).find('a.add_mycrate');

因此,您将在其内部寻找元素。这两个问题都可以通过将元素引用存储在 ajax 之外并将 html 直接插入到存储的元素中来解决

编辑:如何在 wordpress noConflict() 中使用 $ 而不必为所有内容使用 jQuery

jQuery(document).ready(function($)
    // can use `$` for all your code inside the ready handler
    // when you pass it in as argument
)

【讨论】:

精彩的解释,是的,它当然有效。谢谢 Charlietfl ;) 查看关于如何使用$的额外说明 是的,我几乎在所有其他函数中都使用了 $ 包装,只是使用 jQuery 编写了这个,没有特别的原因。 ;)【参考方案2】:

this 放入elm 变量中post 之前,然后更改elm 的html,如下所示。

jQuery(document).ready(function()
    jQuery(document).on('click', "a.add_mycrate", function(event) 
        event.preventDefault();

        var title = jQuery(this).attr('data-title');
        var artwork = jQuery(this).attr('data-artwork');
        var stream = jQuery(this).attr('data-stream');
        var download = jQuery(this).attr('data-download');
        var elm = this;

        var data = 
            'action': 'addToCrate',
            'security': jQuery( '#crate-nonce' ).val(),
            'podtitle' : title,
            'podartwork' : artwork,
            'podstream' : stream,
            'podsave' : download
        ;                  

        jQuery.post(myCrate.ajaxurl, data, function(response) 
            jQuery(elm).html(response);
            alert(response);
        );              
    );
);

【讨论】:

this 不是元素

以上是关于无法让(这个)jQuery 选择器工作的主要内容,如果未能解决你的问题,请参考以下文章

无法让光谱颜色选择器工作

无法让选择器与 JQuery SVG 库一起使用

优化jQuery选择器

带有 $(this) 的 jQuery 多重选择器

JQuery UI Datepicker:制作链接触发日期选择器

ASP.NET MVC - jquery 日期选择器