使用jquery访问twitter引导模式正文内容

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

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

我想将dataremote与model一起使用，以加载包含MVC局部视图内容的model

这一切我都做得很好

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

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

但是，如果我移动脚本，使其在拉入模态体时在局部视图中输出，则脚本确实起作用，并处理单击事件

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

是否能够访问远程加载到模态体中的元素，而不必将脚本放在远程局部视图中

作为补充，我刚刚模拟了一个测试，其中model不使用数据远程，并且锚href直接插入到model主体中，执行此操作时，我仍然无法从主页访问此锚。单击事件。 非常感谢您的建议

做更多的研究，我在下面的帖子中找到了答案

这似乎表明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主体作为jquery选择器的一部分。？有人能解释一下吗？

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

当页面加载时，JQuery将在DOM中查找您的$（“#TestButton”），但找不到任何内容，因为此时动态内容尚未注入

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

您的代码是：

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

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

实际上。。。从jquery1.7开始，Live似乎已经贬值了

它是

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

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

---

希望这有帮助。

您可以在Bootstrap 3中通过在单击的元素上使用HTML5数据属性并侦听modal

show

事件来操作远程内容模式的内容

---

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

&时代；
情态标题
接近
//我们无法使用show.bs.modal或loaded.bs.modal事件
//因为远程模式内容在DOM中不可访问
//当这些事件触发时
//显示远程模式内容时
$（'#myModal'）.on（'show.bs.modal'，函数（e）{
//从单击的元素获取数据属性值
var merchantName=$（e.relatedTarget）.data（'merchant-name'）；
//并设置显示的远程模式的内容
$（'myModalLabel'）.text（商品名称）；
});
//清理隐藏的远程模式的内容，因为它是缓存的
$（'#reservationModal'）。on（'hide.bs.modal'，function（e）{
$（this.removeData（'bs.modal'）；
});

---

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

&时代；接近
情态标题
义人的道路四面都被自私者的罪孽和恶人的暴政所包围。以慈善和善意的名义，带领弱者穿越黑暗之谷的人是有福的，因为他确实是他兄弟的守护者和寻找失踪儿童的人。我将以极大的复仇和愤怒打击那些企图毒害和毁灭我兄弟的人。当我向你报仇时，你就会知道我的名字是耶和华

接近
保存更改