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

Question

Я использую стороннюю библиотеку 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"); 

Я предполагаю, что мне нужно, чтобы передать его в качестве аргумента где-нибудь?

Answer 1

В функции обработчика 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...'); 
}; 

Answer 2

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

Answer 3

Каждая функция обратного вызова событий получает ссылку на событие, вызвавшее ее. Вы уже настроены для получения этой ссылки с аргументом 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. 
    } 
    }); 
}); 

Answer 4

При использовании $(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'); 
     } 
    }); 
}); 

Answer 5

Это пример, который использует SweetAlert, который является заменой е или всплывающее окно встроенного предупреждения Javascript. Если вы еще не проверили SweetAlert, я настоятельно рекомендую вам это сделать. It also integrates very well with 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>