社区首页 >问答首页 >使用jquery访问twitter bootstrap body body内容

问使用jquery访问twitter bootstrap body body内容
EN

Stack Overflow用户

提问于 2012-11-27 10:39:45

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

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

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

我想使用data-remote和modal一起加载带有MVC局部视图内容的modal。

我把这一切都做得很好。

但是我想要做的是能够通过jquery从主视图访问元素(从局部视图)，即使我确信我已经正确地选择了选择器，但它并没有像预期的那样工作。

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

但是，如果我移动脚本，使其在部分视图中输出，就像拉入模态主体一样，那么脚本就可以工作了，并且click事件也会得到处理。

我不希望在局部视图中有脚本(即使引用了)，我宁愿在主视图中引用一个脚本。

有没有办法访问远程加载到模态主体中的元素，而不必将脚本放在远程部分视图中？

作为补充，我刚刚模拟了一个测试，在该测试中，模式不使用data-remote，并且锚href被直接插入到模式主体中，执行此操作时，我仍然无法从主页访问此anchor.click事件。非常感谢您的任何建议。

通过更多的研究，我在下面的帖子How to set the input value in a modal dialogue?中找到了答案

这似乎建议jquery选择器也应该包含.mode-body，所以我已经将选择器从以下改为：

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

        alert('Test Button Clicked'); 
    })

到这个

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

        alert('Test Button Clicked'); 
    })

现在，click事件会像我最初预期的那样触发。

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

jquery

asp.net-mvc

twitter-bootstrap

modal-dialog

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-11-27 11:57:51

当新的动态内容加载到DOM中时，您需要将click事件连接到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'); 
        });

希望这能有所帮助。

票数 1

Stack Overflow用户

发布于 2014-07-13 07:43:51

您可以在Bootstrap3中操作远程内容模态的内容，方法是在单击的元素上使用HTML5数据属性并侦听模态show事件。

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>