Question

我有这个事件，它听取了一个img的点击然后它将img切换为另一个，但是这个img可以变得非常小，我想让整个tr点击能够。有什么建议吗？

$('#example tbody td img').live('click', function () {
                var nTr = $(this).parents('tr')[0];
                if ( oTable.fnIsOpen(nTr) )
                {
                    /* This row is already open - close it */
                    this.src = "images/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "images/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
            } );

更新我试过用这个，但现在我的img不会改变。我如何选择要使用的img（这个）或者我只是为它做一个var？

$('#example tbody td').on('click', function (e) {
        var myImage = $(this).find("img");
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
        /* This row is already open - close it */
        myImage.src = "images/details_open.png";
        oTable.fnClose( nTr );
        }
        else
        {
        /* Open this row */
        myImage.src = "images/details_close.png";
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
        }
    } );

Answer 1

非常简单

选择td而不是img

 $('#example tbody td').on('click', function () {

_{P.S：当然不推荐使用live函数，因此最好使用.on()}

Answer 2

首先：现在最好使用delegate()或on()代替live()，现在已经弃用了。{/ p>

第二：只需为td添加一个处理程序，从本质上讲，它将获得与你的img相同的点击事件，然后你可以选择img并像它一样玩它，考虑下面的例子正在使用更好的on()

方式

更新：我已经修改了一些代码以使其更好

    $('#example tbody').on('click', 'td', function (e) {
        var myImage = $(this).find("img");
        var nTr = this.closest('tr');
                if ( oTable.fnIsOpen(nTr) )
                {
                    /* This row is already open - close it */
                    myImage.src = "images/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    myImage.src = "images/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
}

现在你应该对这个解决方案感到满意，如果你需要进一步的帮助，请告诉我。

Answer 3

选择td并将click事件绑定到它。

Answer 4

正如@Mohammed ElSayed所说.live（）已被弃用..

但..在我的情况下，当我在飞行元素上创建

 .on('click', function(){})

对我不起作用......

所以尝试在td中使用.live（）

$('#example tbody td').live('click', function()...);

同样的事情发生在我身上（不起作用）

$('#example').prop('name');

只是评论我可能正在做一些不好的事情。

Answer 5

将click事件委托给TD标签，然后在点击的目标内找到图像并更改其来源。这里：

$('#example tbody').on('click', 'td', function (e) {
              var nTr = $(this).parents('tr')[0];
              var clickedImg = $(e.target).find('img')[0]; 

            if ( oTable.fnIsOpen(nTr) )
            {
                /* This row is already open - close it */
                clickedImg.src = "images/details_open.png";
                oTable.fnClose( nTr );
            }
            else
            {
                /* Open this row */
                clickedImg.src = "images/details_close.png";
                oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
            }
        } );

我没试过这个，但它应该有效。

单击事件监听器

5 个答案:

非常简单