Javascript Ajax调用第二次不起作用_Javascript_Php_Jquery_Ajax

Javascript Ajax调用第二次不起作用

javascript php jquery ajax

Javascript Ajax调用第二次不起作用,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我有一个ajax/php结构，在选择一个图像时可以完美地工作。但是，如果我第二次单击“selecteer”执行相同的代码，则不会显示任何图像。不过，“ajax”页面确实可以正确加载基本上是我所拥有的文章页面：此页面显示10个按钮“Selecteer”。在这10个按钮下面有一个div，按下Selecteer后会显示一些图像。单击其中一个图像时，将选中单击的图像，并将单独显示。 Javascript：该脚本绑定单击事件，并执行ajax加载和图像显示。图像页面：该页面由ajax加载，并显示在文章

我有一个ajax/php结构，在选择一个图像时可以完美地工作。但是，如果我第二次单击“selecteer”执行相同的代码，则不会显示任何图像。不过，“ajax”页面确实可以正确加载

基本上是我所拥有的

文章页面：此页面显示10个按钮“Selecteer”。在这10个按钮下面有一个div，按下Selecteer后会显示一些图像。单击其中一个图像时，将选中单击的图像，并将单独显示。 Javascript：该脚本绑定单击事件，并执行ajax加载和图像显示。图像页面：该页面由ajax加载，并显示在文章页面内的div中

编辑：

我做了一些测试。第二次使用ajax调用加载div时（图像页面），它会使用createImage函数“创建”所有图像。但我只看到搜索栏和“zoek”按钮。所以真正的问题是：图像不会第二次显示

代码（我遗漏了一些我认为不相关的东西）

第条：

<?php for($i = 0; $i < constant("MAX_PICS"); $i++) { ?>
<button <?php echo"id='select_portal$i' class='select_portal_class'";?> type="button">Selecteer</button>
<div <?php echo"id='dialog_form$i'";?> style="display:none; position:absolute; width:auto; height:auto; margin-left: auto; margin-right: auto; z-index:1;"></div>
<div <?php echo"id='selected_image$i'";?> style="display:block;  width:auto; height:auto">
<?php if(isset($_GET['edit_artikel'])) { ?><img src="../images/<?php $beeldbank = Beeldbank::find_by_portal_id($artikel->portal_id); echo $beeldbank[0]->imagelib_id; ?>/<?php echo $artikel->portal_id;?>" id="selid" width="125" /> <?php } else {?>
<img src="../images/icons/no_image_found.png" alt="No image available" <?php echo"id='selid$i'";?> width="125" /> <?php } ?>
<input type="hidden" <?php echo"id='portal_id$i'";?> name="portal_id" value="<?php if(isset($_GET['edit_artikel'])) { echo $artikel->portal_id; } ?>" />
</div>
<div id="selected_portal"></div>

最后是图像页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/SelectImage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var photos    = <?php echo json_encode($photoSources); ?>;
    var photoAlts = <?php echo json_encode($photoAlts); ?>;
    var photoTags = <?php echo json_encode($photoTags); ?>;
    var photoCount= <?php echo $total_count; ?>;
    photoCount    = photoCount/10;
    photoCount    = Math.ceil(photoCount);
    function buttonClicked(id){
        var page  = id;
        photoPage = page*10;
        minCount  = photoPage-10;
        maxCount  = photoPage;
        jQuery("#imagesDiv").html("");
        createButtons();
        $( "#imagesDiv" ).append( " <br/>");
        populateDiv();
    }
    function createButtons() {
        var i     = 1;
        var button= "";
        while(i <= photoCount)
        {
            var button    = document.createElement("BUTTON");
            var buttonName= document.createTextNode(i);
            button.appendChild(buttonName);
            button.id     = i;
            jQuery(button).bind('click', { id: i}, function(event) {
                var data  = event.data;
                buttonClicked(data.id);
            });
            var objTo = document.getElementById('imagesDiv');
            objTo.appendChild(button);
            i++;
        }
    }
    $(".moreButton").click(function() {
            maxCount += 10;
            minCount += 10;
            jQuery("#imagesDiv").html("");
            populateDiv();
    });
    function populateDiv() {
        for(var i = minCount;i < maxCount; i++)
        {
            if(i < <?php echo $total_count ?>)
            {
                create_image("../"+photos[i],photoAlts[i]);
                $( "#imagesDiv" ).append( "<p style=\"display:inline; padding-left:10px;\">" + photoTags[i] + "</p><br/>" );
            }
        }
    }
    createButtons()
    $( "#imagesDiv" ).append( " <br/>");
    populateDiv();
});
</script> <?php

if(isset($_POST['submit'])) {
    $artikel->portal_id = $_POST['portal_id'];
}?>

<fieldset>
     Afbeelding zoeken
 <form id="formpie" name="zoek" action="" method="POST">
  <input type="hidden" name="zoek" value="zoek" id="zoek"/>
  <input type="text" name="tags" size="31" id="tags"/>

  <input type="submit" name="zoek" id="search" value="Zoek" />
</form>
    <div id="imagesDiv" style="width:800px; height:780px;">
    <label for="portal_id"></label>
    </div>
</fieldset>
<div id="selected_img_div" style="display:none; width:auto; height:auto;">
    <?php if($selected_image == NULL) { echo "No image selected"; } 
    else { echo '<img src="images/'.$selected_image.' class="selimgid"/>'; } ?>
</div>


$（文档）.ready（函数（）{
var照片=；
var photoAlts=；
var-photoTags=；
var光电计数=；
光电计数=光电计数/10；
光电计数=数学单元（光电计数）；
功能按钮点击（id）{
var page=id；
photoPage=第10页；
minCount=photoPage-10；
maxCount=照片页；
jQuery（“#imagesDiv”）.html（”；
createButtons（）；
$（“#imagesDiv”）。追加（
）；
填充iv（）；
}
函数createButtons（）{
var i=1；
var按钮=”；
而
用它替换你的代码。我认为url刷新有问题。所以试试吧
用它替换您的代码。我认为url刷新有问题。因此请尝试。
尝试更改为
$('body').on('submit','#formpie', function(e) {
  e.preventDefault();
  var dialog = $("#dialog_form"+tempDialogID);
  $.ajax({
    type   : 'POST',
    url    : "imglib.php",
    data   : $(this).serializeArray(),
    success: function(data) {
        dialog.html(data);
    }
  });
});

试着换成
$('body').on('submit','#formpie', function(e) {
  e.preventDefault();
  var dialog = $("#dialog_form"+tempDialogID);
  $.ajax({
    type   : 'POST',
    url    : "imglib.php",
    data   : $(this).serializeArray(),
    success: function(data) {
        dialog.html(data);
    }
  });
});

如果动态加载内容并希望对其执行绑定操作，则不应使用.bind（）、.click（）和.on（[action]、function（）{}）函数。因为这些函数只能绑定到页面加载时呈现的元素中
所以你应该使用这个函数：
$（'body'）。在（[action]，[selector]，function（）{}）上
[操作]：您需要哪种类型的绑定（即：单击、提交等）
[选择器]：选择要绑定的元素（即：'.moreButton'）
例如，代替该代码：
$(".moreButton").click(function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

使用此代码：
$('body').on('click' , '.moreButton', function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

如果动态加载内容并希望对其执行绑定操作，则不应使用.bind（）、.click（）和.on（[action]、function（）{}）函数。因为这些函数只能绑定到页面加载时呈现的元素中
所以你应该使用这个函数：
$（'body'）。在（[action]，[selector]，function（）{}）上
[操作]：您需要哪种类型的绑定（即：单击、提交等）
[选择器]：选择要绑定的元素（即：'.moreButton'）
例如，代替该代码：
$(".moreButton").click(function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

使用此代码：
$('body').on('click' , '.moreButton', function() {
    maxCount += 10;
    minCount += 10;
    jQuery("#imagesDiv").html("");
    populateDiv();
});

可能您正在使用具有新内容的函数或事件
如果你这么做了，也许你也会遇到这样的问题
也许您正在使用新内容的函数或事件
如果你这么做了，也许你也会遇到这样的问题
我也遇到了同样的问题，在head标签中添加了下面的代码后，问题得到了解决
<meta charset="UTF-8">
<meta http-equiv="cache-control"
    content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 G`enter code here`MT" />
<meta http-equiv="pragma" content="no-cache" />

我也遇到了同样的问题，在head标签中添加了下面的代码后，问题得到了解决
<meta charset="UTF-8">
<meta http-equiv="cache-control"
    content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 G`enter code here`MT" />
<meta http-equiv="pragma" content="no-cache" />


您是否观察了浏览器控制台中的请求/响应周期，以查看它是否提供了任何信息？您使用的是哪个版本的jQuery？单击按钮时，它确实执行ajax/get请求。我想我使用的是1.11.0版！它执行请求？没有返回任何内容？on（）在jQuery的更高版本中，
优于bind（）
。我确实使用了.on，但什么也没做。实际上什么也没做。我还使用了.live，我的版本也不支持它。您在图像页面中有一个错误。如果（$selected\u image==NULL），请检查是否（$selected\u image==NULL）
但是您没有在本页中初始化此变量，因此我假设在第一次运行时，您在这里使用此变量aready initialized，但是当您从AJAX上下文调用它时，它没有任何值您是否观察了浏览器控制台中的请求/响应周期，以查看它是否提供了任何信息？jQuer的哪个版本您使用的是什么？单击按钮时，它会执行ajax/get请求。我想我使用的是1.11.0版！它执行请求？不会返回任何内容？on（）
优于bind（）
在jQuery的更高版本中。我确实使用了.on，那没有做任何事情。实际上什么也没有做。我还使用了.live，这也是我的版本不支持的。您在图像页面中有一个错误。如果（$selected\u image==NULL），请选中if（$selected\u image==NULL）
但是您在本页中没有初始化这个变量，所以我假设在第一次运行时，您在这里使用的这个变量是已初始化的，但是当您从AJAX上下文调用它时，它没有任何值为什么刷新会有问题？使用AJAX的全部原因是不必刷新。感谢您的回复se.问题是这段代码中没有出现这个问题，因为..我没有按submit:PWhy刷新会有问题吗？使用AJAX的全部原因是为了避免刷新。感谢您的回复。问题是这段代码中没有出现这个问题，因为..我没有按submit:P