E.预防更改模式文本后打开A模式时,默认设置不起作用。模式是在不更改内容的情况下打开的

2022-03-02 00:00:00 jquery javascript bootstrap-modal

单击模式触发器按钮时,我正在尝试更改模式正文文本。但情态是开放的,但情态正文文本并没有改变。 这是MODEL的代码

<button type="button" class="btn btn-info open-modal" data-remote="false" data-toggle="modal"  data-target="#myModal">Register</button>

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

        <!-- Modal content-->
        <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>

然后是防止默认事件的来源

$('.open-modal').click(function(e)
{
    e.preventDefault();
    alert('hello i am jquery');
    $('#myModal').modal('show');
});

为什么警告(‘hello,我是jQuery’);行没有执行?


解决方案

当您的Html优先于jQuery时可能会发生这种情况,因为您的按钮指定要使用以下属性打开的目标模式

data-remote="false" data-toggle="modal"  data-target="#myModal"

删除它们,jQuery就会正常

$('.open-modal').click(function(e)
{
    e.preventDefault();
    alert('hello i am jquery');
    $('#myModal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info open-modal" >Register</button>

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

        <!-- Modal content-->
        <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>

相关文章