从附加的内容调用 javascript

Call javascript from appended content

本文关键字：调用 javascript      更新时间：2023-09-26

我从附加的内容调用 ajax 时遇到问题。

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

https://jsfiddle.net/r7f3zo92/

$(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中，它工作正常，但本地没有！奇怪！

你能找到与这个例子相关的问题吗？谢谢的

从我从ajaxupload.js源代码中收集到的信息来看，它似乎期望加载时有一个元素（或元素的 id）。在onload事件上，它使用mousemove等将大量内容绑定到它，而不是简单的click事件。这样做是有原因的（处理浏览器中的差异），但这意味着：

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

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

  1. 创建一个隐藏的输入，绑定到第二个AjaxUpload ，然后在每次显示时将其移动到表单中

  2. 更改您使用的库

为了更清楚地了解第一个选择，这里有一个工作 jsfiddle。这个想法是：

  • 加载时，您创建一个隐藏#choice2按钮
  • 每次创建模态时，您都会在模态内移动（而不是克隆）
    • 按钮
  • 模态关闭后，您将按钮放回主体内并将其隐藏
  • 您的按钮已准备好进行下一个模式调用。

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

相关文章：