0

我在 DIV 中有一个表单（通常使用“display:none;”隐藏 div） 用户打开 DIV：onclick='$("#Details").show("slow"); 填写表单并保存数据。

我不想重新加载整个页面，我只需要重新加载这个 DIV

我试过了：

function(data) {
    $('#Detalils').load(location.href + ' #Detalils');
});

和：

$("#Detalils").load(location.href + " #Detalils, script");

和：

$('#Detalils').load(location.href + ' #Detalils', function() {
$('#script').hide();
})

#script 我把我的脚本放在哪里

在这个 div 中我有一些脚本，并且由于 jQuery on load 脚本执行，脚本没有被执行。

我不能将脚本放在外部文件中，它必须在页面正文中。

有没有办法很好地执行脚本？

谢谢

4

2 回答 2

0

我的本地环境中的作品。试一试你的。

的HTML：

<div id="wrapper">
<a href="/" id="mremovebtn" title="remove">Remove</a>
<a href="/" id="mreloadbtn" title="reload">Reload</a>
<div id="Details">my details box</div>
</div>

jQuery：

<script type="text/javascript">

function mload() {
/*LOAD IN MY EXTERNAL STUFF*/
    mtarget =  $('#Details'); //the element on your page, that houses your external content
    mscript = 'external.js'; //the js script required for your plugin to work
    mtarget.load("external.html", function(){
    $.getScript(mscript, function() {
        //run the plug-in options code for your external script here
    });
 });
//*/
}

function madjustments() {
/*ADJUST THE LOADING PROCESS*/
    //remove the load request on click from your remove button
    $('#mremovebtn').on("click",function(e) {
      e.preventDefault();
      $('#Details').children().remove();
    });

    //reload the request on click from your reload button
    $('#mreloadbtn').on("click", function(e) {
      e.preventDefault();
      mload();
    });
//*/
}


(function($){
  mload();
  madjustments();
})(jQuery);
</script>

您显然需要 2 个附加文件。一个叫 external.html，另一个叫 external.js，我的演示代码可以正常工作。但是您可以将命名过程更改为适合您的任何内容。

额外：在您的外部 html 文件中（在父元素上）设置一个类，例如#external。默认情况下，在样式表中将 CSS 设置为 display:none。然后当页面加载时，只需在 jQuery 代码中显示（）它。

于 2013-06-20T17:11:10.127 回答
0

Your actual Javascript code should not be within the div, that is the issue. If you wish to reload the form for the user to enter new data, then use ID's on the elements within your forms and write your JQuery code outside of it or in an external file, here is a simple example :

Instead of something like :

<form>

    <input type="button" onclick="alert('hello');"> Click me ! </input>

</form>

Do something like : 

<form>

    <input id="myButton" type="button"> Click me ! </input>

</form>

<script type="text/javascript"> 

    $("#myButton").click(function() 
    {
        alert('hello');
    });

</script>

You will have to adapt your code to this, of course, but you don't have another choice. HTML code can be removed and added at will, but Javascript code must not be treated the same way. There are many reasons for this, but one reason is that the browser will only load the Javascript functions once, for obvious optimization reasons.

于 2013-06-20T16:13:40.073 回答