Question

我正在尝试在模态中做一些简单的jQuery内容，并且无法弄清楚如何调用代码以使其在模态中工作。我假设问题是页面加载后模式存在。

这是我的CoffeeScript：

jQuery ->
  $(".alter_workout").click (e) ->
    url = $(@).attr("href")
    dialog_form = $("<div id=\"dialog-form\" title=\"Edit Workout\">Loading form...</div>").dialog(
      modal: true
      autoOpen: false
      closeText: "close"
      closeOnEscape: true
      hide: "fade"
      show: "fade"
      width: 550
      dialogClass: "admin_forms"
      open: ->
        $(@).load url + " #content"
      close: ->
        $("#dialog-form").remove()
    )
    dialog_form.dialog "open"
    e.preventDefault()

jQuery ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('input[type=hidden]').val('1')
    $(this).closest('fieldset').fadeOut()
    event.preventDefault()

  $('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

第一个jQuery ->是加载模态的部分。第二个jQuery ->是应该在模态内执行的jQuery。

有什么想法吗？我甚至无法得到一条错误消息，所以我完全迷失了。当我点击其中一个.remove_fields链接时，它会跳转到页面顶部。

Answer 1

我认为你可以尝试在模态事件发生时使用你的js。例如，bootsrap模态有一些关于模态事件的不错选项像：

 $('#myModal').on('shown.bs.modal', function () {
      // do something…
    });

'shown.bs.modal'是用户界面中显示模态的事件，因此您可以在此事件中执行所有js。我试了一下，工作正常。我猜问题模式的问题是它们只在你调用它时加载，所以你永远不能在document.ready函数上执行js，或者在正文末尾执行js。

抱歉我的英文

Answer 2

问题在于，在模式打开之前调用要在模态中可用的侦听器，因此在调用底部“on”函数时，这些元素不存在。也许你可以将这两个捆绑在一个单独的函数中，并在调用“.alter_workout”时调用该函数。

抱歉，我对coffeescript没有信心，但这是一个直接javascript的例子（我只包含了一个听众函数），但希望这是有道理的：

$(".alter_workout").click(function(e) {
    //open modal stuff
    //call listener functions here, once the modal is opened and elements are displayed
    $('form').on('click', 'add_fields', function(event){
        time = new Date().getTime();
        regexp = new RegExp($(this).data('id'), 'g');
        $(this).before($(this).data('fields').replace(regexp, time));
        event.preventDefault();
    });
    ///other listener function as well

});

Answer 3

事实证明，正确的答案比预期的要简单得多。我所要做的就是替换

 $('form').on 'click', '.remove_fields', (event) ->

带

 $(document).on 'click', '.remove_fields', (event) ->

由于加载页面时表单不存在，JS代码无法找到它。解决方案是在文档中搜索选择器.remove_fields

问题解决了！

Answer 4

乍一看，它似乎没有将单击处理程序添加到表单中，因为它找不到要添加处理程序的表单。您可能想要做的是将$('form').on 'click'处理程序定义移动到一个函数，然后在屏幕上创建模式对话框后调用该函数。

让jQuery代码在模态中运行

4 个答案: