Estoy haciendo un procesamiento ajax en el evento de clic que funciona bien, pero ahora quiero agregar class en la función de éxito. Estoy usando $(this).addClass("cover"); pero no pasa nada. Si me dirijo a la clase para agregar clase, significa que si uso así $('.dz-cover').addClass("cover"); funciona bien, pero agrega clase a todas las etiquetas de enlace que tienen el nombre de clase '.dz-cover' . No quiero, solo quiero agregar clase solo a ese enlace en el que estoy haciendo clic. mi codigo esta abajo
$("#dropzonePreview").on("click", "a.dz-cover", function () { var id = $(this).data('id'); $.ajax({ type: 'POST', url: 'attachment/cover', data: {id: id}, dataType: 'html', success: function (data) { $(this).addClass("cover"); } }); });Esto se debe a que el contexto del elemento a.dz-cover se pierde en la llamada ajax, puede establecer el contexto en las llamadas ajax usando la opción de contexto:
$("#dropzonePreview").on("click", "a.dz-cover", function () { var id = $(this).data('id'); $.ajax({ type: 'POST', url: 'attachment/cover', context:this, data: {id: id}, dataType: 'html', success: function (data) { $(this).addClass("cover"); } }); });this no funcionará en este caso, porque el success es otro bloque.
$("#dropzonePreview").on("click", "a.dz-cover", function () { var elm = $(this); var id = elm.data('id'); $.ajax({ type: 'POST', url: 'attachment/cover', data: { id: id }, dataType: 'html', success: function (data) { elm.addClass("cover"); } }); });Está tratando de usar $(this) fuera de contexto. Debe configurarlo en una variable para poder usarlo dentro de su devolución de llamada AJAX de esta manera:
$("#dropzonePreview").on("click", "a.dz-cover", function () { var id = $(this).data('id'); var element = $(this); $.ajax({ type: 'POST', url: 'attachment/cover', data: {id: id}, dataType: 'html', success: function (data) { element.addClass("cover"); } }); });