无法让(这个)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 选择器工作的主要内容,如果未能解决你的问题,请参考以下文章