jquery：$（this）.data（＆＃39; id-site＆＃39;）总是返回我点击的第一个值

时间：2017-04-21 12:25:00

标签： javascript jquery html 

<button data-id-site="359319" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="56541" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="32641" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="012438" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="545123" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>

这是我的Html代码

$(function(){
    $(".detailparc").click(function(){
        html = '<div class="modal fade" id="modalDetailParc">';
        html+= '<div class="modal-dialog" role="document">';
        html+= '<div class="modal-content">';
        html+= '<div class="modal-header">';
        html+= '<button type="button" class="close" data-dismiss="modal"';
        html+= 'aria-label="Close">';
        html+= '<span aria-hidden="true">&times;</span>';
        html+= '</button>';
        html+= '<h4 class="modal-title">Detail Parc</h4>';
        html+= '</div>';
        html+= '<div class="modal-body">';
        html+= $(this).data('id-site');
        html+= '</div>';
        html+= '<div class="modal-footer">';
        html+= '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>';
        html+= '</div>';
        html+= '</div>';
        html+= '</div>';
        html+= '</div>';

        $("#parc").append(html);
        $("#modalDetailParc").modal('show');
    });
});

那是我的jquery代码

我想检索data-id-site属性的内容。 当我第一次点击按钮时一切都很好，但是当我点击另一个按钮时，我总是得到我点击的第一个按钮的值：/

4 个答案:

答案 0 :(得分：0)

您可以使用此代码检索data-id-site属性的内容：

$(this).attr('data-id-site');

代替，

$(this).data('id-site');

答案 1 :(得分：0)

所以这是你必须要做的问题 

$(".detailparc").on('click', function() {

    var = siteId = $(this).data("id-site");

    html = '<div class="modal fade" id="modalDetailParc">';
    html+= '<div class="modal-dialog" role="document">';
    html+= '<div class="modal-content">';
    html+= '<div class="modal-header">';
    html+= '<button type="button" class="close" data-dismiss="modal"';
    html+= 'aria-label="Close">';
    html+= '<span aria-hidden="true">&times;</span>';
    html+= '</button>';
    html+= '<h4 class="modal-title">Detail Parc</h4>';
    html+= '</div>';
    html+= '<div class="modal-body">';
    html+= siteId;
    html+= '</div>';
    html+= '<div class="modal-footer">';
    html+= '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>';
    html+= '</div>';
    html+= '</div>';
    html+= '</div>';
    html+= '</div>';

    $("#parc").append(html);
    $("#modalDetailParc").modal('show');
});

像这样检查并告诉我

答案 2 :(得分：0)

尝试如下：

＆＃13;
＆＃13; 
$(function(){
    $(document).on('click','.detailparc',function(){
        /*html = '<div class="modal fade" id="modalDetailParc">';
        html+= '<div class="modal-dialog" role="document">';
        html+= '<div class="modal-content">';
        html+= '<div class="modal-header">';
        html+= '<button type="button" class="close" data-dismiss="modal"';
        html+= 'aria-label="Close">';
        html+= '<span aria-hidden="true">&times;</span>';
        html+= '</button>';
        html+= '<h4 class="modal-title">Detail Parc</h4>';
        html+= '</div>';
        html+= '<div class="modal-body">';
        html+= $(this).data('id-site');
        html+= '</div>';
        html+= '<div class="modal-footer">';
        html+= '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>';
        html+= '</div>';
        html+= '</div>';
        html+= '</div>';
        html+= '</div>';

        $("#parc").append(html);
        $("#modalDetailParc").modal('show');*/
        alert($(this).data('id-site'));
    });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-id-site="359319" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details - 359319</button>
<button data-id-site="56541" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details - 56541</button>
<button data-id-site="32641" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details - 32641</button>
<button data-id-site="012438" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details - 012438</button>
<button data-id-site="545123" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details - 545123</button>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以尝试使用此代码按预期运行它。它是唯一的条件，你必须清除字段，然后再下一次通过此代码清除以前的值

jQuery("#parc .modal").remove();


jQuery(function($){
    jQuery(".detailparc").click(function(){
        html = '<div class="modal fade" id="modalDetailParc">';
        html+= '<div class="modal-dialog" role="document">';
        html+= '<div class="modal-content">';
        html+= '<div class="modal-header">';
        html+= '<button type="button" class="close" data-dismiss="modal"';
        html+= 'aria-label="Close">';
        html+= '<span aria-hidden="true">&times;</span>';
        html+= '</button>';
        html+= '<h4 class="modal-title">Detail Parc</h4>';
        html+= '</div>';
        html+= '<div class="modal-body">';
        html+= jQuery(this).data('id-site');
        html+= '</div>';
        html+= '<div class="modal-footer">';
        html+= '<button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>';
        html+= '</div>';
        html+= '</div>';
        html+= '</div>';
        html+= '</div>';
        
        jQuery("#parc .modal").remove(); 
        jQuery("#parc").append(html);
        //jQuery("#modalDetailParc").modal('show');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<button data-id-site="359319" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="56541" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="32641" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="012438" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>
<button data-id-site="545123" class="btn btn-warning detailparc"><i class="glyphicon glyphicon-plus"></i> Details</button>

<div id='parc'></div>

相关问题
最新问题