文章/答案/技术大牛

发布

社区首页 >问答首页 >在动态创建的元素上单击按钮

问在动态创建的元素上单击按钮
EN

Stack Overflow用户

提问于 2015-10-28 10:08:54

回答 2查看 1.3K关注 0票数 0

我正在使用jQuery AJAX创建元素，因此当单击按钮时，会加载一个页面，该页面将预先生成对其中一个按钮的单击。

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

加载的页面如下所示：

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

jquery

html

ajax

javascript

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-10-28 10:21:31

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

如果它在那里(即您需要将ID提供给按钮)，那么它应该可以工作：

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

我假设“#按钮”是在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();
            }
        } );
    } );
} );

票数 0

Stack Overflow用户

发布于 2015-10-28 10:23:27

将下面的语句放在ready event.These语句上，调用'#myModalButton‘，在document.You就绪之后单击事件，不需要执行单击事件，因为按钮的id为'myModalButton’。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33388159

复制

相似问题

问在动态创建的元素上单击按钮
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在动态创建的元素上单击按钮EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在动态创建的元素上单击按钮
EN