Make a button click on a dynamically created element

Question

I am creating elements using jQuery AJAX and need to make it so when a button is clicked, a page is loaded that preforms a click on a button within it.

This means that when the new data is loaded, a click event needs to be trigged that loads a modal into the form without the user physically clicking the button.

The page that is loaded in looks like this:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" style="display: none;" id="myModalButton">Open Modal</button>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

And the jQuery AJAX as such:

$( document ).ready( function ()
{
    $( "#limit_results" ).on( "click", function ()
    {
        $.ajax( {
            url: "timesheets.libs/items/modal.php",
            type: "GET",
            success: function ( r )
            {
                //alert( "" ); //Used to test AJAX was working
                $( "#bottom" ).html( r );
                $( "#bottom" ).on( "load", "#myModalButton", function ()
                {
                    //How to make it click????

                    // FAILED
                    //$( window ).load( function ()
                    //{
                    //    $( '#myModal' ).modal( 'show' );
                    //} );

                    // FAILED
                    //$( "#bottom" ).$( "#myModalButton" ).click();
                } );
            }
        } );
    } );
} );

The expected behaviour is as such:

• User clicks first button (`limit_results`)
• AJAX loads the modal into the view but does not show it
• In the same AJAX call as prior, the button on the modal form is triggered by javascript/jQuery (not the user) and shows the modal to the user (`myModalButton`)

note
jQuery and BootStrap version I am using:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 1

I can't see "myModalButton" in your loaded html.

If its there (i.e. you need to give that ID to the button), then this should work:

$( "#bottom" ).on( "click", "#myModalButton", function ()
    {
        alert('modal button clicked');
    }

I'm assuming that "#button" is the ID of a container existing on the page before the AJAX request.

EDIT, based on your edit of the question:

If an event function had been attached to that button, then all you need to do after the AJAX returns is:

$('#myModalButton').click();

Please note that with your given code, you have not shown the code that would assure this. The code block that says $( "#bottom" ).on( "load",... does not need to be there.

 

EDIT 2: This thread is now rather cluttered with comments, and I'm not sure we're not getting lost in it.

If you say that clicking that #myModalButton button, when manually clicked, does what you want, then this should be your AJAX code:

$( document ).ready( function ()
{
    $( "#limit_results" ).on( "click", function ()
    {
        $.ajax( {
            url: "timesheets.libs/items/modal.php",
            type: "GET",
            success: function ( r )
            {
                //alert( "" ); //Used to test AJAX was working
                $( "#bottom" ).html( r );
                $( "#bottom" ).find('#myModalButton" ).click();
            }
        } );
    } );
} );

Answer 2

Put below statement on ready event.These statement call '#myModalButton' click event after ready of document.You don't need to perform click event for button having id as 'myModalButton'.

$( "#myModalButton" ).trigger( "click" );