Question

我在firstpage.php中有以下html结构：

<div id="result" style="display:none">This is result div</div>
<form id="adres" onsubmit="return submitForm();">
<input type="hidden" name="type" value="some_value" />
<input type="submit" value="Open" />
</form>

以内联式：

#result{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}

这个html页面做了什么，点击＆＃34;打开＆＃34;按钮＆＃34; adres＆＃34;表单，一些帖子数据被发送到另一个php页面，该页面显示基于发送数据的信息，例如div（样式为display：none）fadeIn from display：none。用于此目的的javascript / jquery代码如下：

function submitForm(){
  var data=$("#adres").serialize();
  $.post("anotherpage.php",data,
  function(data){
    $("#result").html(data);
    positionPopup();
    $("#result").fadeIn(1000);

  }
 )
return false;
}
function positionPopup(){
$("#result").css({
left: ($(window).width() - $('#result').width()) / 2,
top: ($(window).width() - $('#result').width()) / 2,
position:'absolute'
});
}

$(document).ready(function(){
  $("#divclose").click(function(){
    $(#result).fadeOut(500);
    return false;
});
});

并在anotherpage.php中：

<?php
echo $_POST['type'];
?>
<br /><a href="#" id="divclose">Close</a>

即firstpage.php中带有获取数据的div将弹出如下结构：

<div id="result">
some_value
<a href="#" id="divclose">Close</a>
</div>

在这个阶段，一切都还好。但当我点击＆＃34;关闭＆＃34;链接弹出div div没有关闭（fadeOut）与$（＆＃34; #divclose＆＃34;）。单击（function（）为什么在这种情况下不会发生这种情况？

Answer 1

您需要使用函数on()来绑定动态创建的元素上的事件：

http://api.jquery.com/on/

$(document).ready(function(){
    $("body").on('click',"#divclose",function(){
        $('#result').fadeOut(500);
        return false;
    });
});

您还有一个拼写错误：$(#result).fadeOut(500); =＆gt; $('#result').fadeOut(500);

不能使用jquery淡出动态div

1 个答案: