Question

我正在使用jQuery AJAX创建元素，并且需要在单击按钮时创建元素，然后加载一个页面，预先单击其中的按钮。

这意味着当加载新数据时，需要触发一个单击事件，该事件将模态加载到表单中，而无需用户实际单击该按钮。

加载的页面如下所示：

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

和jQuery AJAX一样：

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

预期的行为是这样的：

用户点击第一个按钮（`limit_results`）
AJAX将模态加载到视图中但不显示
在与之前相同的AJAX调用中，模态窗体上的按钮由javascript / jQuery（不是用户）触发，并向用户显示模态（`myModalButton`）

注意
我正在使用的jQuery和BootStrap版本：

<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

我在加载的html中看不到“myModalButton”。

如果它在那里（即你需要将该ID提供给按钮），那么这应该有效：

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

我假设“#button”是AJAX请求之前页面上存在的容器的ID。

编辑，根据您对问题的修改：

如果事件函数已附加到该按钮，那么在AJAX返回后您需要做的就是：

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

请注意，使用您给定的代码，您没有显示可确保此代码的代码。显示$( "#bottom" ).on( "load",...的代码块不需要在那里。

编辑2： 这个帖子现在的评论很混乱，我不确定我们是不会迷失它。

如果你说点击那个#myModalButton按钮，当手动点击，做你想要的，那么这应该是你的AJAX代码：

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

将以下语句放在ready事件上。这些语句在准备好文档后调用'#myModalButton'单击事件。您不需要为id为'myModalButton'的按钮执行click事件。

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

单击动态创建的元素按钮

2 个答案: