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 ->はモーダルをロードする部分です。2 つ目jQuery ->は、モーダル内で実行されることになっている jQuery です。

何か案は？これからエラーメッセージを出すことさえできないので、私は完全に迷っています。リンクの 1 つをクリックする.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

問題は、モーダルで使用できるようにするリスナーがモーダルが開かれる前に呼び出されるため、下部の「オン」関数が呼び出されたときにそれらの要素が存在しないことです。おそらく、これら 2 つを別の関数にまとめて、「.alter_workout」が呼び出されたときにその関数を呼び出すことができます。

申し訳ありませんが、coffeescriptでそれを行う自信がありませんが、これはストレートなjavascriptの例です（リスナー関数の1つだけを含めました）が、うまくいけばこれは理にかなっています：

$(".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 に答える
0

一見すると、ハンドラーを追加するフォームが見つからないため、フォームにクリック ハンドラーを追加していないように見えます。ハンドラー定義を関数に移動し、$('form').on 'click'画面上にモーダル ダイアログを作成した後にその関数を呼び出すこともできます。

于 2013-09-11T18:54:23.833 に答える