0

ボタンが AJAX を使用している親 DIV の ID を送信しようとしています。これはマークアップです：

<div id="32"><input id="button" type="button" class="before" onclick="add_fav();" /></div>

これは現在の状態の ajax スクリプトです。

<script>
function add_fav()
{   
jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}
</script>

これは機能していないため、DIV の ID を渡すために使用している方法は明らかに正しくありません。おそらく誰かが私をまっすぐにすることができますか？

4

2 に答える 2

1

インライン クリック ハンドラーを使用する場合は、クリックされた項目への参照を関数に渡します。

onclick="add_fav(this);"

それで：

function add_fav(btn)
{   
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(btn).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}

inline 属性内ではthis、クリックされた要素を参照しますが、呼び出している関数内では参照しません (.call()またはでそうするための手順を実行しない限り.apply())。

ただし、イベント ハンドラーを jQuery にバインドすることをお勧めします。

jQuery("input.before").click(function(){
   jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(this).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
});

...そして、jQueryはthis適切に設定されていることを確認し、インラインのonclickも必要ありません。上記を document.ready ハンドラーまたはボタンの後に表示されるスクリプト ブロック (たとえば、本文の最後) に配置します。

于 2012-08-05T22:09:02.073 に答える
0

要素をパラメーターとして関数に渡して、関数で使用できるようにします。onclick="add_fav(this);"

<script>
function add_fav(element)
{   
jQuery.ajax({       
      url: 'addfav.php',
      type: 'POST',
      data: {'id':jQuery(element).closest("div").attr("id"),is_ajax: 1},
      success: function(html) {
        jQuery('#button').removeClass('before');
        jQuery('#button').addClass('after');
        jQuery('#button').attr('disabled', 'disabled');
      }, 
      error: function() {
        jQuery('#error').html('<div>Error! Unable to add food item.</div>');
      }
    });
}
</script>

thisそれでも関数で使用したい場合はfunction.call()、を使用して、それをどのようにonclick="add_fav.call(this);"使用するかを使用できます。add_fav

于 2012-08-05T22:10:26.933 に答える