Question

我设计了一个名为kk-container.aspx的ASP.NET页面，用作控件，它将使用jQuery加载函数加载到Default.aspx中。页面kk-container.aspx包含许多HTML控件和javascript事件，如示例所示。

<!--Sample code from kk-container.aspx-->
<div id="kk-container">
    <a href="#" id="kk-action">Action</a>
    <!--Many HTML controls here-->
</div>
<script type="text/javascript">
    $(document).ready(function () {
            $("#kk-action").click(function () {
            return false;
        });
    });
    //Many javascript here.
</script>

我使用Default.aspx中的此类代码将此kk-container.aspx加载到Default.aspx中。

<div id="mycontainer"></div>
<script type="text/javascript">
    $("#mycontainer").load("kk-container.aspx");
</script>

到目前为止一切正常。但是，我必须在Default.aspx中的几个div中加载此kk-container.aspx。这会导致HTML控件的id发生冲突。 $("#kk-action").click()不适用于所有人。如何解决此问题并在一个Default.aspx页面中多次加载kk-container.aspx。

更多话要说：我考虑为kk-container.aspx的每次加载为HTML控件提供随机ID。但是我已经使用id选择器设计了我的样式表。我使用了一个包javascript，valums uploader，在kk-container.aspx中工作。它还需要编辑。如果有一种更简单的方法，我不想全部编码。

Answer 1

我对jQuery的期望过高，拼命地问这个问题。我应该首先决定是否在页面中使用“kk-container”一次或多次。为了多次加载“kk-container”，我不得不考虑这些：

使用类选择器而不是id选择器设计CSS。
为我的HTML元素生成随机ID，例如this question。
编写我的javascript函数，使它们与那些随机id兼容。

因此，在jQuery加载的页面中加载“kk-container.aspx”不会导致任何ID冲突。

无论如何，我犯了一个错误，并且不想重写我的代码。我找到了一个解决方案，在我的Default.aspx页面中加载“kk-container.aspx”的内容没有问题。我使用了iframe而不是jQuery加载函数。

由于已经存在ID为“kk-action”的项目，

<a href="#" id="kk-action">Action</a> (like this one)

加载包含ID为“kk-action”的项目的内容会造成麻烦。

$("#mycontainer").load("kk-container.aspx?id=" + recordID); //troublesome method.

而是创建一个没有边框的iframe，并将该内容加载到iframe中。

function btnEdit_Click(recordID) {
$('#mycontainer').html("");
    var kayitKutusuFrame = document.createElement("iframe");
    kk-Frame.setAttribute("id", "kk-iframe");
    kk-Frame.setAttribute("src", "kk-container.aspx?id=" + recordID);
    kk-Frame.setAttribute("class", "kk-iframe"); //For border: none;
    kk-Frame.setAttribute("frameBorder", "0");
    kk-Frame.setAttribute("hspace", "0");
    kk-Frame.setAttribute("onload", "heightAdapter();"); //For non-IE
    document.getElementById("Mycontainer").appendChild(kk-Frame);
    if (isIE = /*@cc_on!@*/false) { //For IE
        setTimeout(function () { heightAdapter() }, 500);
    } 
}

我没有给“kk-iframe”随机ID，因为我不会多次使用它。它现在位于FaceBox中。为了使iframe完美无瑕，需要自动调整大小。我的heightAdapter（）函数会做到这一点。不仅当内容加载到iframe中而且内容因我的点击而动态变化时。

以下是调整iframe大小以适合Guy Malachi内容的实际代码。

function calcHeight(content) {
    //find the height of the internal page
    var the_height = content.scrollHeight;

    //change the height of the iframe
    document.getElementById("kk-iframe").height = the_height;
}

这是我的heightAdapter（）函数，它可以在加载内容和单击导致内容扩展的内容时起作用。

function boyutAyarlayici() {
    var content=document.getElementById("kk-Frame").contentWindow.document.body;
    calcHeight(content);
    if (content.addEventListener) { //Forn non-IE
        content.addEventListener('click', function () {
            calcHeight(content);
        }, false);
    }
    else if (content.attachEvent) { //For IE
        content.attachEvent('onclick', function () {
            calcHeight(content);
        });
    }
}

以下是转发器中的链接。由于链接将被复制，因此它应该具有asp服务器的唯一ID。

<a href="#mycontainer" rel="facebox" id='btnEdit-<%# Eval("ID") %>'
onclick='btnEdit_Click(<%# Eval("ID") %>); return false;'>Düzenle</a>

现在，每当我点击其中一个副本链接时，具有ID为“kk-action”的项目的内容就可以加载到我的完美iframe中，该iframe将在“mycontainer”中创建。

<div id="mycontainer" class="kk-iframe" style="display:none"></div>

内容将在我喜欢的FaceBox中显示。

Answer 2

您将不得不使用类来设置元素的样式。每页只能有一个唯一的ID，因此您必须在JavaScript中生成不同的ID或使用类选择器，例如：

$('.kk-action').click()

以上可能是最好的方法，因为它会为该类的每个元素提供绑定

使用jQuery ajax加载多次加载页面时发生冲突

2 个答案: