Щелчок по кнопке не вызывает Подтверждение всплывающего окна

Question

Я использую jQuery confirm box plugin и хочу вызвать его при событии якорного щелчка. Код я использую не работает:

<a href="javascript:addData();" class="btn btn-primary btn-block example-p-2">Add Grid</a> 


function addData(){ 
    $('.example-p-2').on('click', function() { 
     $.confirm({ 
      confirmButtonClass: 'btn-info', 
      cancelButtonClass: 'btn-danger' 
     }); 
    }); 
} 

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

Пожалуйста, исправьте меня.

<script src="jquery.min.js"></script> 
     <script src="bootstrap.min.js"></script> 
     <script src="pretty.js"></script> 
<script type="text/javascript" src="jquery-confirm.js"></script> 

Answer 1

Вы должны остановить поведение события по умолчанию, в этом случае сво a элемент, таким образом, он будет пытаться naviate к href вы предоставляете. Вы можете предотвратить это, выполнив evt.preventDefault(). Вам также не нужно определение функции.

Заменить код от:

function addData(){ 
    $('.example-p-2').on('click', function() { 
     $.confirm({ 
      confirmButtonClass: 'btn-info', 
      cancelButtonClass: 'btn-danger' 
     }); 
    }); 
} 

к:

$('.example-p-2').on('click', function (evt) { 
     evt.preventDefault(); 
     $.confirm({ 
      confirmButtonClass: 'btn-info', 
      cancelButtonClass: 'btn-danger' 
     }); 
}); 

Надеется, что это помогает. Функция

Answer 2

Ваш AddData() только при добавлении слушателя событий для кнопки в первый раз, это называется, чтобы показать свое подтверждени всплывающее окно, вы должны использовать непосредственно

$('.example-p-2').on('click', function() { 
           $.confirm({ 
            confirmButtonClass: 'btn-info', 
            cancelButtonClass: 'btn-danger' 
           }); 

          }); 

и ваша кнопка должна выглядеть

<a href="#" class="btn btn-primary btn-block example-p-2">Add Grid</a> 

---

Вот рабочий Plunker

Answer 3

Изменить код для этого:

<a class="btn btn-primary btn-block example-p-2">Add Grid</a> 

<script> 
    $('.example-p-2').on('click', function() { 
     $.confirm({ 
      confirmButtonClass: 'btn-info', 
      cancelButtonClass: 'btn-danger' 
     }); 
    }); 
</script> 

http://jsfiddle.net/nzezu5zy/

Answer 4

Вы можете попробовать это ...

<a id='addData' class="btn btn-primary btn-block example-p-2">Add Grid</a> 

$('#addData').bind('click',function(){ 


});