Modal details display conflict with jquery function

m75sa

Hi, I'm using responsive datatable with modal display.
When i have into the row some links that call a jquery function it doesn't work.
Of course i added .js etc. What i see is only the modal content with the "delete" link inside, but when i click on it the function (with the alert inside) is not called.
Any help on this?

Example:

         <table id="example1" class="display nowrap">
                          <thead>
                          <tr>
                            <th>item1</th>
                            <th>item2</th>
                          </tr>
                          </thead>
                          <tbody>
        <td>content item1 </td>
        <td><a href="#" class="delete" id="63" >delete</a></td>
        </tbody>
        <table>

<script>
    $(document).ready(function() 
    { 
$(".delete").click(function()  {
           alert('works!');
          });


$('#example1').DataTable( {
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll()
            }
        }
    } );

});

</script>

tangerine

Your tbody has no tr tags.

m75sa

yes sorry, i added tr too but the same problem.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

m75sa

Yes @colin, you're right.
I replicated the issue by using jsfiddle.net.

I hope you can understand.. try to click on delete button, is must alert but it' doesn't work...
this is the main problem i have by using onclick function (link the .delete one)

https://jsfiddle.net/m75sa/fbes1uvo/13/

thanks for your help

m75sa

Sorry, you're right

live.datatables.net/fopubayi/1/watch

m75sa

any help?

colin

I took a look at your first link (the second doesn't run). The problem is because the form wasn't in the DOM when the click event was created, so you need to use delegated events. Changing the click event to be:

$("body").on('click', 'a.delete', function()  {
           alert('works!');
});

does the trick - see here,

Colin

m75sa

thanks a lot. The only problem is when it's on mobile so as responsive mode one, so when i click on the link "delete" it opens the modal + the alert... so two windows. Is there a way to catch only the butto indipendently?

thanks for your help!

colin

I'm sorry, I'm not following that. Please can you give step-by-step instructions on the test case I posted, saying what is happening, and what you would expect to happen instead.

Colin

m75sa

You're right. Sorry, i'm new on this forum.

live.datatables.net/fopubayi/1/watch

colin

Thanks, that example doesn't run. I was really asking you to use the example that I posted, but explain what isn't working for you as I'm not understanding your issue.

Colin

m75sa

thanks colin, all solved with your suggestions

$("body").on('click', 'a.delete', function()  {
           alert('works!');
});

this works perfectly. Thanks again