Question

我遇到了执行以下代码行的问题。代码包含2部分。一个是简单的HTML文件，通过Ajax调用另一个Html页面。

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
type: 'GET',
url: 'check.html',
cache:false,
success: function callme(html){
document.getElementById('display').innerHTML=html;
}
});
});
});
</script>
</head>
<body>
<form>
<input type="button" id="btn" value="Click"/>
</form>
<div id="display"></div>
</body>

check.html

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#btn").hide();
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="Click"/>
</body>
</html>

问题是，当我尝试单击page1.html的按钮时，它不会隐藏check.html的jquery部分的按钮，但是如果我只是运行check.html页面，它会立即隐藏按钮。我不会＃39;不知道问题出在哪里。

Answer 1

当你在页面中加载check.html时，你在页面上有两次id btn。

您是否尝试过更改它，看看是否能解决问题？

Answer 2

在Page1上尝试这样做：

$(document).ready(function(){
    $("#btn").click(function(){
        $.get("check.html", null, function(data) {
            $("#display").html(data);
        }, "html");
    });
});

Answer 3

您的主要问题是，一旦您加载了html，您将在页面上有两个具有相同ID的按钮。尝试将您正在加载的（并希望隐藏）更改为其他ID。这样你仍然会有有效的标记，你的jquery不会隐藏你的按钮。

您的新按钮可以更改为新内容，例如“newbtn”。然后你应该做

$(document).ready(function() {
    $("#newbtn").click(function() {
        $("#newbtn").hide();
    })    
});

另外......为什么你在$（'＃display'）。html（data）;时使用document.getElementById（'display'）。innerHTML;会有同样的效果吗？

Answer 4

在 check.html 中btn更改btn2，因为ID不应使用两次或更多次

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn2").click(function(){
$("#btn2").hide();
});
});
</script>
</head>
<body>
<input type="button" id="btn2" value="Click"/>
</body>
</html>

Answer 5

问题很简单......就绪事件仅发生在主页加载上。当您加载check.html时，它已经发生。 check.html中的脚本现在会立即触发，但它所引用的html尚未加载。

如果您的脚本标记放在check.html的正文中，则在它引用的按钮之后，将附加处理程序。

使用ajax成功回调也可以缓解这种情况

Answer 6

在check.html中，您已在click（）事件中编写了隐藏功能

$("#btn").click(function(){
    $("#btn").hide(); // this will be executed only if someone clicks the `btn` element
});

如果您使用此代码，$("#btn")只有在点击时才会隐藏。要通过调用AJAX使其隐藏，您需要在外部单击click事件。同时为check.html

中的按钮使用不同的ID

更新：

要实现这一目标，check.html的最终代码应为：

<html>
<head>
<title>
</title>
<script language="javascript" src="jquery-1.7.1.js"></script>
<script language="javascript">
$(document).ready(function(){
    $("#btn").click(function(){
       $("#btn2").hide(); // this will hide only when you click the 'btn2'
    });
    $("#btn2").hide(); // this is for hiding when load the page
});
</script>
</head>
<body>
<input type="button" id="btn2" value="Click"/>
</body>
</html>

Answer 7

目前还不完全清楚你想要达到的目标。您是否希望在按下其中一个按钮时隐藏这两个按钮？或者，您是否只想在单击check.html时隐藏它中的按钮？

如果是最后一个问题，我建议：

在page1.html中有以下内容：

<html>
<head>
<title>
</title>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
type: 'GET',
url: 'check.html',
cache:false,
success: function callme(html){
document.getElementById('display').innerHTML=html;
},
dataType: "html"
});
});

$("#btn2").live("click", function(){
$("#btn2").hide();
});

});
</script>
</head>
<body>
<form>
<input type="button" id="btn" value="Click"/>
</form>
<div id="display"></div>
</body>

check.html：
<input type="button" id="btn2" value="Click"/>

Answer 8

问题是加载的html中的$ .ready在1.7.x中不起作用现在我正在寻找解决方案，但降级到1.6.x的工作原理。

Jquery Ajax加载动态内容

check.html

8 个答案: