Question

我有一堆ajax函数我正在触发事件（click，dblclick，keypress等）在我的events.js文件的开头，我想定义一个变量，它表示用户点击的元素的id。目前正在

$(this).parents('li').attr('data-id')

到目前为止，我试过这种方式：

var element_id = $(this).parents('li').attr('data-id');

var test = function(id)
{
    ajaxCall(id);
}

$('.js_btn_test').live('click', function()
{
    test(element_id);
}

不幸的是它不起作用。我认为当我点击.js_btn_test并将其评估为其父'li'时，将解析element_id var，然后获取data-id。

感谢您的帮助！

EDIT1：基本HTML结构

看起来像这样

<li data-id="<?php echo $item->getId(); ?>">
    <button class="js_btn_test">Test</button>
</li>

Answer 1

不，它不会那样工作。与...

var element_id = $(this).parents('li').attr('data-id');

...您立即为element_id变量分配值，而不是取决于下次检查其值时this的值。

一种可能的解决方法是改为使用函数：

var getElementId = function(el) {
  return $(el).parents('li').attr('data-id');
};
...
$('.js_btn_test').live('click', function() {
   test(getElementId(this));
});

...作为事件处理程序中的this（传递给live的匿名函数）指的是触发事件的元素。

作为旁注，您可以仅.attr('data-id')拨打.data('id')电话，如here所示，并说明here。

Answer 2

如果我理解你正在尝试做的是将基于被点击的元素取出id的逻辑放入变量中。除非你把它变成一个函数，否则这是不可能的（在这种情况下，根本不需要把它变成一个变量）。

例如：

function getIdFromElement(el) {
    return $(el).parents('li').attr('data-id');
}

$('.js_btn_test').live('click', function()
{
    test(getIdFromElement(this));
}

Answer 3

在正确的上下文中执行之前，您无法正确解析this。

var test = function(id)
{
    ajaxCall(id);
}

$('.js_btn_test').live('click', function()
{
    var element_id = $(this).parents('li').attr('data-id');
    test(element_id);

    func01(element_id);
    func02(element_id);
    // etc
}

Answer 4

你不能得到this因为它还没有上下文。

在最新版本的jquery中也不推荐使用live。

以下是jquery网站的摘录

从jQuery 1.7开始，不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应使用.delegate()而不是.live()。

var test = function(id)
{
    ajaxCall(id);
}

$('.js_btn_test').on('click', function()
{
    var element_id = $(this).parents('li').attr('data-id');
    test(element_id);
}

点击后定义'this'

4 个答案: