calling js function works only for the first time on jquery mobile

Question

on jquery mobile web app I'm calling js function on close button. That js function close it's callers div parent. That works fine, but problem is that I have multiple close buttons and this function works perfectly first time, after that onclick doesnt work. It doesnt enter into js function.

I tried to put js function at very bottom of my _ Layout.cshtml page but it doesnt change anything.

update

    <script type="text/javascript">
    $('#closeTable').click(function () {
         $(this).parent().hide();       
    });

</script>

<div id="closeTable"></div>

Answer 1

Your problem is originating from the fact that you're using an ID to add event listeners to. In your JS, you have this line:

$('#closeTable').click(function () { ...

This line attaches a click event handler to the div with ID closeTable . Since there can only be one element with this ID, once it's hidden the user can't click it again and so the function won't be executed again.

If you have multiple close buttons as you say, you should instead use a class selector to attach handlers:

$(".closeTable").click(function() { ...

This will instead attach a listener to every element with class closeTable . This means that when any of them are clicked the function will execute, so it will work multiple times.

Hope this helps.