1

我正在尝试在模态中做一些简单的 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链接时，它只会跳转到页面顶部。

4

4 回答 4

3

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

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

是'shown.bs.modal'模式显示在用户屏幕中的事件，因此您可以在此事件中执行所有 js。我试过了，效果很好。我猜模态的问题在于它们仅在您调用它时才加载，因此您永远无法在 document.ready 函数或正文末尾的 js 上执行 js。

对不起我的英语

于 2013-10-23T14:18:53.743 回答
1

问题是您希望在模式中可用的侦听器在模式打开之前被调用，因此当底部的“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

});
于 2013-09-11T18:56:11.773 回答
1

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

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

和

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

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

问题解决了！

于 2013-09-12T20:14:58.130 回答
0

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

于 2013-09-11T18:54:23.833 回答