2

我是 jquery 和 twitter 引导程序的新手，所以请原谅这个愚蠢的问题。

我有一个 MVC 视图，它设置了一个 twitter 引导模式，它由一个链接激活，该链接也输出在这个视图中。

我想将数据远程与模态一起使用来加载具有 MVC 局部视图内容的模态。

我让所有这些工作都很好。

但是我随后想做的是能够通过 jquery 从主视图访问元素（从部分视图），即使我确定选择器正确，它也不能按预期工作。

例如，我有一个 href 链接，我尝试将其分配给 click 事件，但这不会触发。

但是，如果我移动脚本以使其在部分视图中输出为拉入模态体，那么脚本确实可以工作并且单击事件得到处理。

我宁愿在局部视图中不必有脚本（即使被引用），我宁愿在主视图中引用一个脚本。

无论如何都能够访问远程加载到模态体中的元素，而不必将脚本放在远程部分视图中？

另外，我只是模拟了一个测试，其中模态不使用数据远程并且锚点 href 直接插入模态体中，这样做我仍然无法从主页。非常感谢任何建议。

做更多研究我在以下帖子中找到了答案 如何在模态对话中设置输入值？

这似乎表明 jquery 选择器也应该包括 .modal-body 所以我已经从以下更改了我的选择器：

 $("#TestButton").click(function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    })

对此

 $(".modal-body #TestButton").click(function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    })

现在点击事件正如我最初预期的那样触发。

但是我现在不确定为什么我需要 .modal-body 作为 jquery 选择器的一部分。？有人可以解释一下吗？

4

2 回答 2

1

当新的动态内容被加载到 DOM 中时，您需要将点击事件连接到 href。

当页面加载时，JQuery 将在 DOM 中查找您的 $("#TestButton") 并没有发现任何内容，因为此时动态内容尚未注入。

有几种处理方法……首先，您可以使用 JQuery 延迟点击事件的连接，直到注入新内容，或者您​​可以使用 JQuery 的 .live 函数。

您的代码将是：

$("#TestButton").live('click', function (ev) {
        ev.preventDefault()

        alert('Test Button Clicked'); 
    });

实际上......从 JQuery 1.7 开始，Live 似乎已经贬值了

这是...

$("#TestButton").on('click', function (ev) {
            ev.preventDefault()

            alert('Test Button Clicked'); 
        });

希望这可以帮助。

于 2012-11-27T11:57:50.973 回答
0

show您可以在 Bootstrap 3 中通过在 clicked 元素上使用 HTML 5 数据属性并侦听模式事件来操作远程内容模式的内容。

http://jsfiddle.net/dbasch/UbpS6/

/main.html

<a data-toggle="modal" href="/remote.html" data-target="#myModal" data-merchant-name="Bob's House of Pancakes">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body">
                <div class="te"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

<script type="text/javascript">

// we can't use the show.bs.modal or loaded.bs.modal events
// because the remote modal content is not accessable in the DOM
// when those events trigger

// when the remote modal content is shown  
$('#myModal').on('shown.bs.modal', function (e) {

    // get a data attribute value from the clicked element
    var merchantName = $(e.relatedTarget).data('merchant-name');

    // and set the content of the shown remote modal
    $('#myModalLabel').text(merchantName);

});

// cleanup the content of the hidden remote modal because it is cached
$('#reservationModal').on('hide.bs.modal', function (e) {

    $(this).removeData('bs.modal');

});

</script>

/remote.html

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>

        </button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>

    </div>
    <div class="modal-body">
        <!-- start slipsum code -->
        <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p>
        <!-- please do not remove this line -->
        <div style="display:none;">
<a href="http://slipsum.com">lorem ipsum</a>
        </div>
        <!-- end slipsum code -->
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>
于 2014-07-13T07:43:51.333 回答