Question

我正在尝试在外部html中使用按钮。我正在使用Jquery .load('external.html #id-of-div');。

我也试过简单地在外部文件中放置一个"alert("comments");"，但它永远不会被触发。

这是我加载外部html按钮的脚本：（来自内部主html）

$('#button').on('click', function () {
  $('#container').css({'display': 'block'});
  $('#container').load('external.html' #external-id-of-div);
});

同样来自（来自内部主html）脚本来调用外部html'more-info'中的按钮;这个'more-info'按钮嵌套在＃external-id-of-div

里面

$('.more-info').click(function(){
    if(toggle = 2) {
        $('.full-copy').slideDown(400, function() {
            $(this).removeClass('disappear');
        });
        console.log("one");
        return toggle = 1;
    }
});
$('.full-copy').click(function(){
    if(toggle = 1) {
        $(this).slideUp(500, function() { 
            $(this).addClass('disappear');
        });
        console.log("two");
        return toggle = 2;
    } 
});

html如下:(来自内部主要html）

<span id="button">Click to Load External Content</span>
<div id="container"></div>

html如下:(来自外部主要html）我的问题我还放置了一个alert标记，从加载时也不会触发内部 html如果单独预览为外部文件，alert工作正常。

<div id="external-id-of-div">
    <span class="more-info">Click to expand More INFO</span>
    <div class="full-copy disappear">
           LOREM IPSUM COPY>>>
    </div>
    <script type="text/javascript">
        alert("Outside the jQuery ready");
        $(function() {
            alert("Inside the jQuery ready");
        });
    </script>
</div>

CSS：

.disappear { display: none; }

不确定有什么问题......

我感谢任何可能有帮助的答案，并提前感谢你，欢呼！

Answer 1

首先

load('external.html' #external-id-of-div);

应该是

load('external.html #external-id-of-div');

在您使用.load()时，您需要Event binding on dynamically created elements?

$(document).on('click','.more-info',function(){
// And
$(document).on('click','.full-copy',function(){

Jquery加载内容按钮不起作用

1 个答案: