JQuery 事件处理程序未触发

请看我的代码 -

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;
        });
});

我的上面的代码在点击时工作expand. But colaspe不工作。

JSFIDDLE http://jsfiddle.net/chinmay235/2ornbh0w/

尝试这个：

$(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;
});

工作示例 http://jsfiddle.net/857L5hwj/

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