Question

我遇到了jQuery click（）函数的问题。

我使用此函数以编程方式单击调用ajax函数的链接，该函数将新对象添加到数据库。

当我提交表单时，在我的新对象的对象数据表中添加了一个带有新链接的tr，我想以编程方式点击这个新链接来加载对象属性并显示它们。

问题是在DOM中不存在带有td和link的新tr，并且函数$.('#elem').click')不起作用。

我在其他帖子中看到，我必须将click事件与新的.on函数绑定，如下所示：

$('#parent-items').on('click', 'elem', function() {
   // [...]
});

我不知道我要写什么代替[...]，在我的javascript代码的末尾，我调用了这样的click函数：

$('#myelem').click();

感谢您的帮助

Answer 1

实际上并不那么难。：）

<table id="list">
    <tr>
        <td>John</td>
        <td><a class="btn-hi">Say Hi!</a></td>
        <td><a class="btn-bye">Say Goodbye!</a></td>
    </tr>
    <tr>
        <td>Lucy</td>
        <td><a class="btn-hi">Say Hi!</a></td>
        <td><a class="btn-bye">Say Goodbye!</a></td>
    </tr>
    <tr>
        <td>Sam</td>
        <td><a class="btn-hi">Say Hi!</a></td>
        <td><a class="btn-bye">Say Goodbye!</a></td>
    </tr>
</table>

<script>
$('#list').on('click', 'a', function() {
    // Wrap the clicked <a> element with jQuery
    var $this = $(this);

    // Get the parent <tr> element
    var $tr = $this.closest('tr');

    // Get all (direct) children elements (<td>) that are inside the current <tr> element
    var $tds = $tr.children();

    // Get the text from the first <td> element in the current row
    var name = $tds.eq(0).text();

    // Get the type (class name) of clicked link
    var type = $this.attr('class');

    if (type == 'btn-hi') {
            alert( 'Hi, ' + name + '!' );
    } else if (type == 'btn-bye') {
            alert( 'Goodbye, ' + name + '!' );
    }
});
</script>

在JSBin中查看此演示：http://jsbin.com/welcome/38776/edit

每次用户点击<a>元素内的任何<table id="list">元素时，都会执行click事件。它被称为“事件委托” - http://api.jquery.com/delegate/

因此，您可以动态地向表中添加更多行，一切都可以正常工作。

jquery click（）不起作用

1 个答案: