CODEWITHSUNDEEP
javascriptjquery
Developer
Developer

Reputation: 2706

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

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

JSFIDDLE

Upvotes: 3

Views: 122

Answers (5)

Jerome Anthony
Jerome Anthony

Reputation: 8021

You are replacing the current button id which doesn't work. 

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

Look at this fixed fiddle

Upvotes: 1

nirmal
nirmal

Reputation: 2180

it happens as id is not there when you apply event 

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

user Fiddle here

Upvotes: 1

Alvin Magalona
Alvin Magalona

Reputation: 771

It's not safe to always change the id. Try using a class instead.

<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>

Upvotes: 3

Code Lღver
Code Lღver

Reputation: 15603

Try this:

$(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

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.

Upvotes: 6

ekuusela
ekuusela

Reputation: 5292

The #colaspe button is not there when you try to add the event handler. Either create both of the buttons at the same time or use the delegate pattern for handling the clicks.

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

Upvotes: 5

Related Questions