2017-04-21 51 views
0
<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屬性的內容。 當我第一次點擊按鈕時一切都很好,但是當我點擊其他按鈕時,我總能得到我點擊的第一個按鈕的值:/

+0

'$(「#展區」)上(「點擊」清除以前的值之前, '.detailparc',函數(){' –

+0

它似乎很好用https://jsfiddle.net/gzcm5dkh/ – selvarajmas

回答

0

你可以試試這個代碼來運行它的預期。它唯一的bacuse你將有明確的領域追加下一次該代碼

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>

+0

謝謝....這個禮物:D –

0

您可以使用此代碼來檢索內容數據-ID站點屬性:

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

代替,

$(this).data('id-site'); 
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'); 
}); 

檢查它像這樣,告訴我

0

試試看象下面這樣:

$(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')); 
 
    }); 
 
});
<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>