Question

我在附加内容中调用ajax时遇到问题。

让我们向您展示我的示例（从附加内容调用ajax请求的示例，以及来自无附加内容的其他调用ajax请求）：

$(document).ready(function() {
  new AjaxUpload("#change", {
    action: 'verifImg',
    name: 'uploadfile',
    onSubmit: function(file, ext) {
      if (!(ext && /^(png|jpeg|jpg|bmp|gif)$/.test(ext))) {
        return false;
      }
    },
    onComplete: function(file, response) {

      $("#imagechange").html(response);


    }
  });


  $(document).on('click', '#test', function(ev) {

    $('body').find('#show').remove();
    var modal =
      '<div class="modal fade" id="show" tabindex="-1" role="dialog" aria-labelledby="show">' +
      '<div class="modal-dialog" role="document">' +
      '<div class="modal-content">' +
      '<div class="modal-header">' +
      '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
      '<h4 class="modal-title" id="myModalLabel">Test</strong></h4>' +
      '</div>' +
      '<div class="modal-body">' +
      '<div class="row">' +

      '<div class="form-group">' +

      '<a href="#" class="btn btn-sm btn-default" id="change">Change Image</a>' +
      '<br/>' +
      '<div id="imagechange"></div>' +

      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>';




    $('body').append(modal);

    $('#show').modal({
      show: true
    });
    return false;

  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://www.phpclasses.org/browse/download/1/file/51812/name/ajaxupload.3.5.js"></script>

<strong>Example with appended content:</strong>
<br/>
<a href="#" id="test">An example to test</a>

<br/>
<br/>
<strong>Direct example:</strong>
<br/>
<div class="form-group">
  <a href="#" class="btn btn-sm btn-default" id="change">Change Image</a>
  <br/>
  <div id="imagechange"></div>
</div>

在JSFIDDLE中，它工作正常，但在本地没有！奇怪！

您能找到与此示例相关的问题吗？感谢的

Answer 1

从我从ajaxupload.js源代码中收集的内容来看，它似乎期望加载时可以使用一个元素（或元素的id）。在onload事件中，它会使用mousemove等来绑定大量内容，而不是简单的click事件。它是出于某种原因（处理浏览器中的差异）而完成的，但它意味着：

ajaxupload仅绑定到一个html元素，该元素必须在加载时可用
从代码中模拟#change按钮上的点击事件是不可能的（或非常复杂），因为我们并不确切知道它需要什么类型的事件和参数。

因此，在我看来，您有以下选择：

创建一个隐藏的输入，绑定到第二个AjaxUpload，然后在每次显示时将其移动到您的表单中
更改您使用的库

为了更清楚第一个选择，这里是working jsfiddle。这个想法是：

在加载时，您创建一个隐藏的按钮#choice2
每当你创建你的模态时，你移动（而不是克隆）按钮里面的模态
在模态关闭时，你将按钮放回体内并隐藏它
您的按钮已准备好进行下一次模态通话。

当然，这种方法是一种肮脏的修复方法，只有在您确定一次只有一个组件需要隐藏按钮时才有效。

从附加内容中调用javascript

1 个答案: