Question

我想选择一个html元素，它将来自第一个ajax响应，在第二个ajax请求中用作GET参数。但是因为在加载页面时加载了第二个ajax请求参数，所以第二个ajax请求无法获得将来自第一个ajax响应的新值。我该如何处理这个问题？这是我在代码方面的问题：

JS：

$(document).ready(function() {
    $("#imageInput").change(function(){
        $("#addText").submit();
    });

    var optionsUpload = { 
            url: 'bilesenler/ajaxUploadImage.php',
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: afterAdding,  // post-submit callback 
            resetForm: false        // reset the form after successful submit 
        }; 


    // $("#imgOutput .removeInlineImage") object will come from 
    // first ajax response. Because of this I cannot select this 
    // future element "now" like in the following line. Any suggestion???

    $("#imgOutput .removeInlineImage").on("click", function(){
        var optionsRemove = {
             // $("#imgOutput #imgName") object will come from 
             // first ajax response. I cannot select the future
             // element "now" like in the following.Any suggestion?

            url: 'bilesenler/ajaxRemoveImage.php=imgName=' + $("$imgOutput #imgName"),
            beforeSubmit: beforeRemoving, 
            success: afterRemoving, 
            resetForm: false        
        };
    });


     $('#addText').submit(function() { 
            if(!imgDelete)
                $(this).ajaxSubmit(optionsUpload); 
            else{
                $(this).ajaxSubmit(optionsRemove);
            }

            return false; 
        }); 
});

HTML：

<form action="../adminPaneli/yaziEkle.php" method="POST" name="addText" id="addText" enctype="multipart/form-data">

<!-- There are some codes -->

<input type="file" name="inlineImage" id="imageInput"> <!-- Look the id ! -->

<div id="imgOutput"></div> <!-- Look the id ! -->

<!-- There are some codes -->

</form>

来自第一个ajax响应的结果：

<?php
    echo '<div id="'.$image_name_only.'" class="previewImage">';
    echo '<img class="thumbImage" src="../kitaplik/resimler/upload/'.$new_file_name.'">';
    echo '<br/>';
    echo '<input type="text" id="imgName" class="imgName" value="'. $new_file_name . '">';

    // The important element in this file is the following line. 
    // Look the class name : removeInlineImage. It is used in jquery code above.
    echo '<span class="removeInlineImage">&nbsp;&nbsp;X</span>'; 
    echo '</div>';
?>

如果你回到Jquery代码，我的问题就在那里。如果未来元素尚未到来，我如何选择未来的html元素？

注意：我找到了解决方案。解决方案是我在ajax响应中使用onclick属性。因此，当第一个ajax响应到来时，我可以通过onclick属性触发一个函数，我可以用$（“$ imgOutput #imgName”）初始化第二个ajax请求的url标签。因为，当函数触发时，＃imgName已经带有第一个ajax响应。但这个解决方案对我来说是如此难以理解。因此，我需要一个更好的解决方案。任何的想法？

更新：我找到了一个新的解决方案：ajaxSuccess（）。此解决方案比以前的解决方案更易读。但我仍然是一个新想法。

$(document).ready(function() {
    $("#imageInput").change(function(){
        $("#addText").submit();
    });

    var optionsUpload = { 
            url: 'bilesenler/ajaxUploadImage.php',
            beforeSubmit: beforeSubmit,  // pre-submit callback 
            success: afterAdding,  // post-submit callback 
            resetForm: false        // reset the form after successful submit 
        }; 




    // $("#imgOutput .removeInlineImage") object will be able to
    // be catched with ajaxSuccess event.

    $(document).ajaxSuccess( function() {

        $("#imgOutput .removeInlineImage").on("click", function(){  


            selectedImageName = $(this).prev().val();

            optionsRemove = {
                url: 'bilesenler/ajaxRemoveImage.php?imgName=' + selectedImageName,
                beforeSubmit: beforeRemoving,
                success: afterRemoving, 
                resetForm: false  
            };

            imgDelete = true;
            $("#addText").submit();
        });
    });

    $('#addText').submit(function() { 
        if(!imgDelete)
            $(this).ajaxSubmit(optionsUpload); 
        else{
            $(this).ajaxSubmit(optionsRemove);
        }

        return false; 
    }); 
});

如何用jquery选择一个来自ajax响应的元素？

0 个答案: