JQuery事件處理程序沒有觸發

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

工作實例

原因：您正在動態更改屬性和屬性。 對於這樣的元素，有.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

它發生在你應用事件時id不存在

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

用戶小提琴

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

看看這個固定的小提琴