JQuery事件处理程序没有触发 [英] JQuery event handlers not firing

问题描述

请查看我的代码 -

Please look my code -

Html

<table>
<tr>
    <td valign="top" style="padding-top:10px;">Body :<br><br>
       <a id="expand" href="javascript:;">expand</a>
    </td>
    <td>
       <textarea rows="6" cols="30" required="required" id="message" name="message">
        </textarea>
    </td>
</tr>
</table>

jquery

$(function(){
       $("#expand").click(function(){                      
               $('#message').animate({"height": "300px"}, "slow" );
               $(this).attr('id','colaspe').html('colaspe');
               return false;
        });
        $("#colaspe").click(function(){
               $('#message').animate({"height": "80px"}, "slow" );
               $(this).attr('id','expand').html('expand');
               return false;
        });
});

单击展开时，我的上述代码正常工作。但 colaspe 无效。

My above code working when click on expand. But colaspe not working.

推荐答案

试试这个：

$(document).on('click','#expand',function(){                      
    $('#message').animate({"height": "300px"}, "slow" );
    $(this).attr('id','colaspe').html('colaspe');
    return false;
});
$(document).on('click','#colaspe',function(){
   $('#message').animate({"height": "80px"}, "slow" );
   $(this).attr('id','expand').html('expand');
   return false;
});

工作示例

Working Example

原因：您正在动态更改属性和属性。对于这样的元素，有 .on 函数将事件与jQuery中的元素绑定。所以你需要在元素中使用 .on 函数。

Reason: You are changing the attributes and properties dynamically. For such elements there is .on function to bind the events with element in jQuery. So you need to use the .on function with element.

这篇关于JQuery事件处理程序没有触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！