Question

我在过去一周内遇到了一个没有任何解决方案的问题。

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

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

每次点击链接时，内容都会更改，但不会删除其jquery功能。

例如，假设我单击“创建发票”链接。表单以其jquery函数打开。现在再次当我点击另一个链接时，这个新页面将再次打开，并带有自己的jquery函数。现在jquery的Invoice链接不允许第二页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

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

2 个答案: