jQuery .onイベントトリガーは2つのフォームで異なって動作しますか？

Question

私は前にこの質問の最初の部分を尋ねましたが、答えはありませんでした。私はフォームに1つのイベントをバインドすることができましたが、フォームの1つには何も動作していないようです。上記の場合

$regex = '/^.*(\d{4,4})_(\d{2,2})_(\d{2,2}).*$/'; 
$replacement = '$3/$2/$1'; 
$val = preg_replace($regex,$replacement,$name);    

$formReplacement = 'backup-$3-$2-$1'; 
$formID = preg_replace($regex,$formReplacement,$name); 

$form = array(
     '<form name="rollback-form" id="' . $formID . '" class="rollback-form" method="post" action="#">', 
      '<fieldset class="rollback-fields">', 
       '<fieldset class="display-rollback-wrapper">', 
        '<label for="display-rollback" class="display-rollback-label">Backup</label>', 
        '<input type="text" name="display-rollback" class="display-rollback" value="' . $val . '" autocomplete="off" readonly="readonly" />', 
        '<input type="hidden" name="rollback_id" value="' . $id . '" />', 
       '</fieldset>', 
       '<fieldset class="rollback-wrapper">', 
        '<button type="submit" name="rollback" class="rollback">Rollback</button>', 
       '</fieldset>', 
      '</fieldset>', 
     '</form>', 
     '<div id="' . $formID . '-message-handling" class="message-handling" class="message-handling"></div>' 
    ); 
$form = implode("", $form); 
echo $form; 

、$name = $id = 'logindb_backup_2012_02_02.sql'：

だから、これは私が動的にHTMLに響いてる形式の一つです。

そして私はエコーされたフォームに次のjQuery関数を適用しています：

$('form.rollback-form').on('click', 'button.rollback',function() { 

    var rollback_id = $(this).find('[name="rollback_id"]').val(); 
    var form_id = $(this).attr('id'); 

    console.log(rollback_id); 
    console.log(form_id); 

    $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
    $.ajax({ 
     type:  'POST', 
     url:  'assets/class/login/actions/rollback.php', 
     dataType: 'json', 
     data: { 
      rollback: rollback_id 
     }, 
     success:function(data) { 
      if(data.error === true) { 
       $('.secondary-actions #'+form_id+'-message-handling').text(data.message).fadeIn(); 
       console.log(data.message); 
       setTimeout(function() { 
        $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
       }, 3500); 
      } 
       else { 
        $('.secondary-actions #'+form_id+'-message-handling').text(data.message).fadeIn(); 
        console.log(data.message); 
        setTimeout(function() { 
         $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
        }, 3500); 
       } 
     }, 
     error:function(XMLHttpRequest,textStatus,errorThrown) { 
      $('.secondary-actions #'+form_id+'-message-handling').text('Error | Check PHP log for information').fadeIn(); 
      console.log('Error | Check PHP log for information'); 
      setTimeout(function() { 
       $('.secondary-actions #'+form_id+'-message-handling').fadeOut(); 
      }, 3500); 
     } 
    }); 
    return false; 
}); 

この1つは完璧に動作し、私は'click'イベントを意味し、それが行動になり、別のページに私を送信しません。クリックイベントに添付されたjQueryハンドラによって処理されます。

しかし、上記のような問題がある：

var rollback_id = $(this).find('[name="rollback_id"]').val(); 
var form_id = $(this).attr('id'); 

console.log(rollback_id); 
console.log(form_id); 

これら二つのコンソールundefinedでの出力の上に、その理由は何ですか？それはrollback_id = 'backup/logindb_backup_2012_02_02.sql'とform_id = 'backup-02-02-2012'のようなものでなければなりません。

私が頭の中で述べた問題の2番目の部分は、clickイベントです。上記のフォームのようには機能しません。私を別のページに送ります。フォームページの動作は#です。だからここ

が他の形式である：$this->backups(false,true)上記のフォームで

$form = array(
     '<form name="backup-form" class="backup-form" method="post" action="#">', 
      '<fieldset class="backup-fields">', 
       '<fieldset class="display-wrapper">', 
        '<label for="display" class="display-label">Backups</label>', 
        '<input type="text" name="display" class="display" value="' . $this->backups(false,true) . '" autocomplete="off" readonly="readonly" />', 
       '</fieldset>', 
       '<fieldset class="action-wrapper">', 
        '<button type="submit" name="clean" class="clean">Clean All</button>', 
        '<button type="submit" name="create" class="create">Create</button>', 
       '</fieldset>', 
      '</fieldset>', 
     '</form>', 
     '<div class="message-handling" class="message-handling"></div>' 
    ); 
$form = implode("", $form); 
echo $form; 

それは私の質問に関連していないのです、ただ数です。ここ

とは、jQueryのイベントで私がバインドしようとしているトリガー：

$('form.backup-form').on('click', 'button.clean',function() { 
    console.log('Clean Button Pressed'); 
}); 


$('form.backup-form').on('click', 'button.create',function() { 
    console.log('Create Button Pressed'); 
}); 

しかし、これら二つは全く動作しません。そして、私は.delegate、.click、.submitで試しましたが、どちらもうまくいきません。だから、これら2つの問題は何か？

Answer 1

あなたのコードを試してみるには、このです：

今

var rollback_id = $(this).find('[name="rollback_id"]').val(); 
var form_id = $(this).attr('id'); 

、この文脈で$(this)何ですか？それはbutton.rollbackです。フォームではありません。

代わりにこれを行います。

var form = $(this).closest('form'); 
var rollback_id = form.find('[name="rollback_id"]').val(); 
var form_id = form.attr('id'); 

Answer 2

$(document).on('click', 'button.clean',function() { 
    console.log('Clean Button Pressed'); 
}); 


$(document).on('click', 'button.create',function() { 
    console.log('Create Button Pressed'); 
});