jquery click()不起作用

时间:2012-10-24 13:19:26

标签: jquery ajax asp.net-mvc-3

我遇到了jQuery click()函数的问题。

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

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

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

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

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

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

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

感谢您的帮助

1 个答案:

答案 0 :(得分: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/

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