2016-07-10 2 views
3

Вопрос очень прост, но по какой-то причине я не могу его исправить. Вот a href tag, который откроет модальную коробку.JQuery при нажатии не работает при передаче данных

<center><a href="javascript:void();" class="btn-home" data="<?php echo $cid;?>" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" href="#">Apply</a></center> 

Здесь jquery, чтобы получить идентификатор от атрибута данных.

<script type="text/javascript"> 
$('document').ready(function() 
{ 
    $(document).on('click', '#btn-classified', function() { 
    //$("#btn-classified").on("click", function() { 
    //$("#btn-classified").click(function() { 
    var myvar1 = $(this).data('data'); 
    alert(myvar1); 

}); 
}); 
</script> 

По какой-то причине я не получаю никакого вывода, если я использую $(document).on('click', '#btn-classified', function() { и если я использую $("#btn-classified").on("click", function() { тогда я получаю не определено.

+2

.data ('data') будет использовать атрибут data-data = "", поэтому вам нужно использовать ответ Rui – progysm

ответ

3

Чтобы получить атрибут «данные» из <a> элемента использовать .attr() функцию из JQuery

$('document').ready(function() { 
 
    $(document).on('click', '#btn-classified', function() { 
 
     var myvar1 = $(this).attr('data'); // .attr() to get attribute of an element 
 
     alert(myvar1); 
 
    }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href='#' id='btn-classified' data='This an element of DOM'>Get this DATA value</a>

Ваш код получить не определено на событие click, когда ваш вызов к элементу, который существует после того, как функции ,

Вам нужна производительность логика вашего кода, на JQuery вы хотите использовать

$(document).ready(function(){ 
//your functions with selectors of DOM 
}) 

или использовать .on() функции JQuery событий.

$(document).on('click', '.mainButton', function(){ 
//your code 
}) 
+0

Спасибо за ваш ответ. Проголосовал. – Ironic

+0

Спасибо вам. если этот ответ работает на вас, выберите правильный –

1

Вы хотите изменить data к data-id в вашем HTML. Таким образом, вы можете получить доступ к свойствам данных в вашем JavaScript следующим образом:

$('#btn-classified').on('click', function() { 
    alert($(this).data('id')); 
}); 

$(this).data('data') будет на самом деле ожидать data-data="<?=$someId?>" в вашем HTML.

+0

Спасибо за ваш ответ. Проголосовал. – Ironic

3

У вас есть два hrefs - один говорит javscript:void(); у другого есть хэш (#) Удалите его. Тогда вы не получите неопределенный.

+0

Это не проблема. Проблема заключается в попытке доступа к атрибутам данных с использованием несуществующего ключа. – 1sloc

+0

@JethroVanThuyne это не помогает путать вопрос, указывая его на два местоположения. Один href все равно должен быть удален –

+1

Приятный улов я пропустил. – Ironic

1

В соответствии с документами https://api.jquery.com/data/ атрибут должен быть данными данных , если он требуется для использования через функцию .data.

$('document').ready(function() 
 
{ 
 
$(document).on('click', '#btn-classified', function() { 
 
//$("#btn-classified").on("click", function() { 
 
//$("#btn-classified").click(function() { 
 
var myvar1 = $(this).data('data'); 
 
alert(myvar1); 
 
}); 
 
});
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
<body> 
 
<center> 
 
    <a href="#" class="btn-home" data-data="123" data-toggle="modal" data-target="#ApplyModal" name="btn-classified" id="btn-classified" >Apply 
 
    </a> 
 
    </center> 
 
</body>

+0

Спасибо за ваш ответ. Проголосовал. – Ironic

1

Использование .attr («данные») вместо функций .data («данных»), потому что .data функция используется для хранения произвольных данных, связанных с соответствующими элементами или возвращает значение в названном хранилище данных для первого элемента в наборе согласованных элементов.

+0

Спасибо за ваш ответ. Проголосовал. – Ironic

Смежные вопросы