iframe 函数中的 Jquery 和 ajax 页面加载未刷新

Question

我面临上周的一个问题，没有任何解决方案。

我有一个管理仪表板。链接在左侧，当点击链接时，数据会加载到主要内容部分的 iframe 中。

在 iframe 中加载的每个数据都有自己的 jquery 函数。

当我每次点击链接时，内容都会改变，但它的 jquery 功能并没有被删除。

例如，假设我点击创建发票链接。该表单将使用其 jquery 函数打开。现在，当我再次单击另一个链接时，这个新页面将再次打开，并带有它自己的 jquery 函数。 现在发票链接的 jquery 不允许第二页 jquery 工作。 因此，我的页面存在冲突，并且功能无法按预期工作。

dashboard image

这是一个例子，

我正在使用selectize.js 我用它来提供对选择输入的搜索。 现在我在一个页面上使用它，而不是在另一个页面上使用。

但它会在所有页面上加载搜索功能。

<script>
$(document).ready( function() {
    $("#select").selectize({
    selectOnTab: true,
    openOnFocus: false
    });
});
</script>

这是我在自己的 I 框架中加载每个函数的代码。

<li class="item-group"><a id="ajaxid" href="{% url "createinvoice" %}" target="blank"><i class="material-icons">content_paste</i> Create Invoice</a></li>
          <li class="item-group"><a id="ajaxid" href="{% url "createdc" %}" target="blank"><i class="material-icons">content_paste</i> Create DC</a></li>
          <li class="item-group"><a id="ajaxid" href="{% url "createbos" %}" target="blank"><i class="material-icons">content_paste</i> Create BOS</a></li>

<script>
$("a[id=ajaxid]").on('click', function(event) {
    event.preventDefault();
    var target = $(this).attr("href");
    $("#magicid").load(target);

});
</script>

Answer 1

这里的问题很难理解。尝试在文档就绪函数中绑定事件，如下所示：

$(document).ready( function() {
$("#select").selectize({
selectOnTab: true,
openOnFocus: false
});

$("a[id=ajaxid]").on('click', function(event) {
    event.preventDefault();
    var target = $(this).attr("href");
    $("#magicid").html(target);

});
});

还要检查以下网址。这是你想要完成的事情吗？ https://codepen.io/anon/pen/JprpBy#anon-login

Answer 2

如果问题出在这两个函数上并且您正在调用两个不同的库，它们可能会发生冲突，那么没有足够的详细信息来确定您的确切问题。您可能会考虑设置它们以避免冲突。你可以找到一些建议here