[英]jQuery event target element attribute retrieval
I'm having some trouble pulling attributes from an event target element. 我在从事件目标元素中提取属性时遇到了一些麻烦。
I am using php to access a mysql database. 我正在使用php访问mysql数据库。 From the query I pull out some image file names and their respective id's. 从查询中,我提取了一些图像文件名及其各自的ID。 I then display these images in a table with the following line: 然后,我在带有以下行的表中显示这些图像:
print '<td><img id="img_' . $row['paint_id'] . '" class="thumb_target" src="img/paint/thumb/' . $row['paint_thumb'] .'"></td>';
As you can see, this line gives each image the id 'img_xx' where xx is the images numeric id in the sql database. 如您所见,此行为每个图像赋予ID'img_xx',其中xx是sql数据库中图像的数字ID。 I also give each image the class 'thumb_target'. 我还为每个图像提供了“ thumb_target”类。 In document ready I set a .click event for the thumb_target elements. 准备好文档后,我为thumb_target元素设置了一个.click事件。 This makes an AJAX call which should pass the img_xx id as data. 这将进行AJAX调用,该调用应将img_xx id作为数据传递。 I got this to work in chrome using 我得到了这个在铬使用
data: 'imgID=' + event.target.id
However, several hours later I decided to check something else in firefox and found that it doesn't work for all browsers. 但是,几个小时后,我决定在firefox中检查其他内容,发现它不适用于所有浏览器。 Using jQuery's method: 使用jQuery的方法:
var id = $(this).attr('id');
I can't get id to be anything but undefined. 我无法获得的ID只能是未定义的。 Am I targeting a different element than the element I think I am? 我针对的元素与我认为的元素不同吗?
Here's the pertinent javascript: 这是相关的javascript:
function runClick() {
var id = $(this).attr('id');
alert(id);
$.ajax({
url: 'overlay.php',
//~ data: 'imgID=' + event.target.id,
//~ data: ({ imgID: id }),
data: 'imgID=' + id,
dataType: 'json',
success: function(data, textStatus, jqXHR) {
processJSON(data);
},
error: function(jqXHR, textStatus, errorThrown){
alert("Failed to perform AJAX call! textStatus: (" + textStatus +
") and errorThrown: (" + errorThrown + ")");
}
});
}
$(document).ready( function() {
$('.thumb_target').click( function() {
runClick();
});
$('#overlay').hide();
});
Here's a link to the test page: http://www.carlthomasedwards.com/painting2.php 这是测试页面的链接: http : //www.carlthomasedwards.com/painting2.php
runClick
is executed in global scope, so this
refers to the global object( window
). runClick
在全局范围内执行,因此this
是指全局对象( window
)。
Use that instead: 改用它:
$('.thumb_target').click( function(event) {
runClick.apply(this);
});
or even more simple: 甚至更简单:
$('.thumb_target').click( runClick);
When the browser executes runClick
, the this
context isn't preserved. 当浏览器执行runClick
,不会保留this
上下文。 If you pause in the Chrome debugger , you can see that this
is actually Window
when runClick
is called. 如果您在暂停Chrome的调试器 ,你可以看到, this
实际上是Window
时runClick
被调用。
The way to bypass the problem is to pass the element into runClick
: 绕过该问题的方法是将元素传递到runClick
:
function runClick(elem) {
alert($(elem).attr('id'));
...
}
and 和
$('.thumb_target').click( function() {
runClick(this);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.