Question

请查看我的代码 -

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时，我的上述代码正常工作。但colaspe无效。

JSFIDDLE

Answer 1

试试这个：

$(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函数与元素一起使用。

Answer 2

当您尝试添加事件处理程序时，#colaspe按钮不存在。同时创建两个按钮或使用委托模式处理点击。

https://api.jquery.com/on/

Answer 3

始终更改ID并不安全。请尝试使用类。

<table>
    <tr>
        <td valign="top" style="padding-top:10px;">Body :<br><br>
            <a id="control" href="javascript:;" class="expand">expand</a>
        </td>
        <td>
            <textarea rows="6" cols="30" required="required" id="message" name="message"></textarea>
        </td>
    </tr>
</table>
<script>
$("#control").click(function(){   
    if ($(this).hasClass('expand')) {
        $('#message').animate({"height": "300px"}, "slow" );
        $(this).removeClass('expand').addClass('colapse').html('colapse');
    } else if ($(this).hasClass('colapse')) {
        $('#message').animate({"height": "80px"}, "slow" );
        $(this).removeClass('colapse').addClass('expand').html('expand');
    }

    return false;
});
</script>

Answer 4

当你申请活动

时，它就不存在了

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

用户Fiddle here

Answer 5

您正在替换当前没有工作的按钮ID。

$("#toggle").click(function(){
    if ($(this).attr('class') === 'expand'){
        $('#message').animate({"height": "300px"}, "slow" );
        $(this).attr('class','colaspe').html('colaspe');
    } 
    else {
               $('#message').animate({"height": "80px"}, "slow" );
               $(this).attr('class','expand').html('expand');
    }
});

查看this fixed fiddle

JQuery事件处理程序没有触发

JSFIDDLE

5 个答案: