Відправлення ідентифікатора батьківського розділу кнопки за допомогою ajax - jquery, ajax, post, parent

Я намагаюся подати ідентифікатор батьківського DIV, що кнопка використовує AJAX. Це розмітка:

<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, явно не правильний. Можливо, хтось міг сказати мені прямо?

Відповіді:

Якщо використовується вбудований обробник клацання, передайте посилання на елемент, на який клацнули, вашій функції:

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>");
}
});
}

В межах вбудованого атрибута 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. Помістіть вищезазначене у обробнику документа.

Передайте елемент функції як параметр, щоб ви могли використовувати його у функції. 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 як у вас це є.