Как передать кнопку в функцию Jquery?

Я использую стороннюю библиотеку jQuery под названием jQquery.confirm. Он предоставляет диалоги в jQuery. После нажатия кнопки определенного класса я хочу использовать confirm() функция для того, чтобы вызвать подтверждение:

$(".btn-danger").click(function(event) {
    //Prevent the button from being clicked.
    event.preventDefault();

    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            //Code in here for button to be pressed
        }
    });
});

У меня проблема с confirm: function(), Я хотел бы просто смоделировать нажатие кнопки здесь. Я пробовал это, но он, кажется, не распознает кнопку, которую мне нужно нажать:

$(this).trigger("click");

Я предполагаю, что мне нужно передать это как аргумент где-то?

Источник

5 ответов

Решение

В пределах confirm функция обработчика this не будет ссылаться на кнопку, которая была нажата. Чтобы это исправить, вам нужно сохранить ссылку на нажатую кнопку в переменной вне confirm обработчик.

Заметьте, однако, что логика, которую вы создаете, окажется в цикле; Вы нажимаете кнопку, показывая confirm затем нажмите кнопку еще раз программно, который просто покажет confirm снова и так до бесконечности. Я бы предложил вам вызвать функцию, чтобы сделать то, что нужно в confirm Действие, как это: Попробуйте это:

$(".btn-danger").click(function(e) {
    e.preventDefault();

    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            actionWasConfirmed();
        }
    });
});

var actionWasConfirmed = function() {
    console.log('do something here...');
};
Источник

Когда вы используете $(this) Вы должны убедиться, что используете его в правильном объекте. Вы не можете использовать $(this) внутри $(подтвердите) и ожидайте ссылки на ваш $(".btn-danger"), Вместо этого он будет ссылаться на $(confirm) вместо вашей целевой кнопки.

Посмотрите на рабочий пример ниже и спросите, если что-то неясно.

$(".btn-danger").click(function(e) {
    e.preventDefault();
    // Here $(this) references the object you need clicked
    var currentButton = $(this);
    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            // If you used $(this) here you referenced to your $(confirm) object

            // Instead of a false $(this), use the button that actually triggered this code.
            currentButton.trigger('click');
        }
    });
});

Я не уверен, что это именно то, что вы хотели сделать, но, пожалуйста, учтите, что приведенный выше код является своего рода бесконечным циклом, потому что, когда происходит щелчок, весь этот код будет вызываться снова. Поэтому, если вы хотите нажать другую кнопку, используйте ее полный селектор или назначьте ему уникальный идентификатор и выберите его, как показано ниже:

HTML-код целевой кнопки:

<input type="button" value="Button To Be Clicked after Confirm" name="myButton" id="uniqueID_onWholePage" />

Обновлен код jQuery, который нажимает на эту кнопку

$(".btn-danger").click(function(e) {
    e.preventDefault();
    $.confirm({
        text: "Are you sure you want to delete that comment?",
        confirm: function() {
            $('#uniqueID_onWholePage').trigger('click');
        }
    });
});
Источник

Это пример, который использует SweetAlert, который заменяет встроенное всплывающее окно предупреждения Javascript. Если вы раньше не проверяли SweetAlert, я настоятельно рекомендую вам это сделать. Он также очень хорошо интегрируется с Bootstrap.

Вот рабочий пример (вы можете перейти в полноэкранный режим для полного эффекта). К сожалению, вы не сможете увидеть фактическую отправку работающей, но код должен работать, как только вы добавите реальное действие.

$("form.confirm").find("[type=submit]").click(function(e) {
  var $this;
  e.preventDefault();
  $this = $(this);
  return sweetAlert({
    title: "Are you sure?",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Confirm Delete",
    closeOnConfirm: false
  }, function() {
    return $this.closest("form").submit();
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="confirm" method="POST" action"">
  <button type="submit">Submit</button>  
</form>

Источник

Каждая функция обратного вызова события получает ссылку на событие, которое ее вызвало. Вы уже настроены, чтобы получить эту ссылку с вашим event аргумент. Посредством этого объекта вы можете ссылаться на объект, который вызвал событие (которое будет кнопкой в ​​вашем случае). Итак, вы можете просто сделать это:

$(".btn-danger").click(function(event) {

  //Prevent the button from being clicked.
  event.preventDefault();

  $.confirm({
    text: "Are you sure you want to delete that comment?",
    confirm: function() {
        event.target.trigger("click")"
    }
  });
});

Но, как уже было отмечено, нажатие кнопки может вызвать повторное нажатие кнопки после подтверждения.

Поскольку вы просто хотите удалить что-то после подтверждения, лучшим подходом будет просто удалить запись. Другими словами, отделите свою логику. Нажатие кнопки должно вызвать подтверждение, и подтверждение должно удалить запись, не нажимая кнопку снова.

$(".btn-danger").click(function(event) {

  //Prevent the button from being clicked.
  event.preventDefault();

  $.confirm({
    text: "Are you sure you want to delete that comment?",
    confirm: function() {
        // Delete the comment here, don't click more buttons.
    }
  });
});
Источник

HTML-код для вашей кнопки:

<button class="btn-danger" >Delete</button>

И функция Javascript

$(".btn-danger").click(function(){
if(confirm("Are you sure you want to delete that comment?")){
   //Code in here for button to be pressed
  }
 });
Источник
Другие вопросы по тегам