在使用$ .post获取数据后,使用jQuery调用click函数

时间:2015-01-26 07:19:18

标签: javascript php jquery html

我使用$.post请求从其他php文件中获取数据。

请先检查代码,在这里,如果我点击这里点击这里div与“getPostData”类我将从getData.php文件中获取数据。直到这个文件运行良好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
    $('.getPostData').on('click', function(e){
        var xyz = $(this).closest('.dataFromThisRow').children('.inputBox');

        $.post("getData.php", xyz.children('input[name="abcdxyz"]').serialize(),  function(response) {
            xyz.children('.showDataHere').html(response);
        });

    });

    $('.abcd').on('click', function(e) {
      alert("The text has been changed.");
    });

});//]]>
</script>
</head>

<body>
                    <div class="dataFromThisRow">
                        <div class="inputBox">
                            <input type="text" name="abcdxyz" /><div class="getPostData">click here</div>
                            <div class="showDataHere"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
</body>
</html>

但问题在此之后开始

这是我制作的PHP文件(示例PHP文件,目前原始文件或示例PHP文件没有错误):

<?php

if(isset($_POST['abcdxyz'])) {
    $abcxxx = array ('b', 'c', 'd', 'f', 'g', 'h', 'j', 'k');
    echo '<select name="abcd" class="abcd"><option value="0" selected="selected">Select An Alphabet</option><optgroup label="Constant">';
    foreach($abcxxx as $abcx) { echo '<option value="'.$abcx.'">'.$abcx.'</option>';}
    echo '</select>';
}

?>

这个php文件会返回一个下拉列表。我想要做的是,从php文件中获取数据并显示select下拉列表后,如果我从列表中选择(on(“change”)(name =“abcd”),则输入文本(name =“abcdxyz”) )将被禁用。

但是在这里我尝试使用jQuery进行更改或其他一些命令,但它们都没有工作(甚至我在这里添加的点击功能,jut for sample)。

这里有任何帮助吗?

1 个答案:

答案 0 :(得分:1)

事件处理程序仅绑定到当前选定的元素;它们必须存在于您的代码进行事件绑定调用时的页面上。

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。

正在使用php中的html动态创建元素。

您需要使用Event Delegation。您必须使用委托事件方法来使用.on()

一般语法

$(document).on(event, selector, eventHandler);

理想情况下,您应该将document替换为最近的静态容器。

示例,当您使用select时,我建议您更改事件。

$('.showDataHere').on('change', '.abcd', eventHandler);

同样在你的 getData.php 中,你需要分类而不是名字属性

echo '<select class="abcd">';

而不是

echo '<select name="abcd">';