Ajax 在 Featherlight 中不起作用

Question

我正在尝试在 Featherlight 灯箱中添加 ajax 照片上传脚本，但它不起作用！因此，如果有人可以让我知道我做错了什么，那就太好了！我已经在添加 JQuery 库；其他一切正常，但当上传表单保存在灯箱 div 中以便将其加载到灯箱中时，ajax 未提交上传的照片！这是我的代码：

<script type="text/javascript">
$(document).ready(function (e) {
    $('#uploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success: function(data)
        {
      $("#targetLayer").html(data);
        },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $(".inputFile").on("change", function() {
        $("#uploadForm").submit();
    });
});
</script>

<a href="#" data-featherlight="#add_new_profile" data-featherlight-variant="fixwidth"><button class="btn btn-success">Add New Client Profile</button></a>
  <div class="lightbox" id="add_new_profile">

      <div class="bgColor">
<form id="uploadForm" action="upload_image.php" method="post">
<div id="targetLayer">No Image</div>
<div id="uploadFormLayer">
<label>Upload Image File:</label><br/>
<input name="userImage" id="userImage" type="file" class="inputFile" />
<input type="submit">
</form>
</div>
</div>

  <form id="contact" action="actions.php" method="post">
    <h3>Add New Profile</h3>
    <h4>Fill All Require Details In Order To Add A Client Profile!</h4>
    <fieldset>
      <input placeholder="Namn (Name)" name="full_name" type="text" tabindex="1" required autofocus>
    </fieldset>
    <fieldset>
      <input placeholder="Ålder (Age)" name="age" type="text" tabindex="2" required>
    </fieldset>
    <fieldset>
      <input placeholder="Ort (City)" name="city" type="text" tabindex="3" required>
    </fieldset>
    <fieldset>
      <input placeholder="Yrke (Profession)" name="profession" type="text" tabindex="4" required>
    </fieldset>
      <fieldset>
      <input placeholder="Kundnr (Client ID)" name="client_id" type="text" tabindex="5" required>
    </fieldset>
    <fieldset>
      <textarea placeholder="Info" tabindex="6" name="info" required></textarea>
    </fieldset>
    <fieldset>
      <button name="submit" type="submit" value="create" id="contact-submit" data-submit="...Sending">Submit</button>
    </fieldset>
  </form> 
       </div>
        </div>

Answer 1

您在灯箱中使用了 ID。 Featherlight 复制 DOM 对象，默认情况下（除非您使用 persist 选项）。使用类而不是 ID，使用比 $("#targetLayer") 更好的定位器，你会没事的。

Ajax 在 Featherlight 中不起作用

Ajax is not working inside Featherlight

javascript

ajax

jquery

featherlight.js