jQuery kann das Datenattribut nicht aktualisieren

Question

Ich kann das Datenattribut nicht aktualisieren. Ich habe eine Klasse .edf, die, wenn diese data-clckfügt neue Span-Tag für das Klickelement in dom und aktualisiert Daten geklickt Attribut arbeitet

Jetzt, wo ich will, wenn ich auf einen der neu hinzugefügte Element span klicken, um alle .edf ' s sollte das Datenattribut data-clck auf den Wert 0 aktualisiert haben. NICHT ARBEITEN

-Code unten und fiddle if required:

var pans = "<span class='panok'></span><span class='panno'></span>"; 
 
    var input1 = "<input name='vendor_service_item' type='text' class='in_cell_input' value='"; 
 
    var input2 = "'>"; 
 
    var bal; 
 
    $('.edf').click(function(){ 
 
    var dis = $(this); 
 
    var clck = dis.attr('data-clck'); 
 
    if(clck == 0){ 
 
     $('.edf').each(function(){$(this).attr('data-clck','1');}); 
 
     bal = dis.html().toString(); 
 
     var nbal; 
 
     if (bal.includes('$')){nbal = bal.replace('$','')} 
 
     dis.html(input1+nbal+input2+pans); 
 
     dis.attr('data-clck','2'); 
 
    }// if end 
 
    else if(clck == 2){} 
 
    else if(clck == 1){alert("Please deselect current cell to select other cells");} 
 
    }); 
 

 
    $('.edf').on('click', '.panno', function(){ 
 
    var tis = $(this); 
 
    tis.parent().html(bal); 
 
    $('.edf').each(function(){$(this).attr('data-clck','0');}); 
 
    });//panno click end

.edf{text-align:center;position:relative;} 
 
.edf:hover{cursor:pointer;cursor:hand;} 
 
    .panok{ 
 
    position:absolute; 
 
    top:0; 
 
    right:0; 
 
    width:12px; 
 
    height:12px; 
 
    background-color: #6dc777; 
 
    } 
 
    .panno{ 
 
    position:absolute; 
 
    bottom:0; 
 
    right:0; 
 
    width:12px; 
 
    height:12px; 
 
    background-color: #FF6666; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table class="tableizer-table" id="rebillable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Quantity</th> 
 
     <th>Amount</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Some Name</td> 
 
     <td class="edf" data-avsid="b0sds00001" data-clck='0'>1</td> 
 
     <td class="edf" data-avsid="bxsd000001" data-clck='0'>$10.22</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Verwenden event.stopPropagation() verhindern Ereignispropagierung - so was passiert, ist, dass, wenn Sie auf panno auf das Ereignis ausbreitet zu der edf die auch ist Ausgelöst.

Ein Zeiger - verwenden Sie data('clck') statt attr('data-clck'). Beachten Sie auch, nbal wurde nicht richtig ausgewertet - auch das behoben.

Siehe Demo unter:

var pans = "<span class='panok'></span><span class='panno'></span>"; 
 
var input1 = "<input name='vendor_service_item' type='text' class='in_cell_input' value='"; 
 
var input2 = "'>"; 
 
var bal; 
 
$('.edf').click(function() { 
 
    var dis = $(this); 
 
    var clck = dis.data('clck'); 
 
    if (clck == 0) { 
 
    $('.edf').each(function() { 
 
     $(this).data('clck', '1'); 
 
    }); 
 
    bal = dis.html().toString(); 
 
    var nbal = bal.replace('$', ''); // CHANGED THIS 
 
    /*if (bal.includes('$')) { 
 
     nbal = bal.replace('$', '') 
 
    }*/ 
 
    
 
    dis.html(input1 + nbal + input2 + pans); 
 
    dis.data('clck', '2'); 
 
    } // if end 
 
    else if (clck == 2) {} else if (clck == 1) { 
 
    alert("Please deselect current cell to select other cells"); 
 
    } 
 
}); 
 

 
$('.edf').on('click', '.panno', function(e) { 
 
    e.stopPropagation(); // ADDED THIS 
 
    var tis = $(this); 
 
    tis.parent().html(bal); 
 
    $('.edf').each(function() { 
 
    $(this).data('clck', '0'); 
 
    }); 
 
}); //panno click end

.edf { 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.edf:hover { 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.panok { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 12px; 
 
    height: 12px; 
 
    background-color: #6dc777; 
 
} 
 

 
.panno { 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    width: 12px; 
 
    height: 12px; 
 
    background-color: #FF6666; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableizer-table" id="rebillable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Quantity</th> 
 
     <th>Amount</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Some Name</td> 
 
     <td class="edf" data-avsid="b0sds00001" data-clck='0'>1</td> 
 
     <td class="edf" data-avsid="bxsd000001" data-clck='0'>$10.22</td> 
 
    </tr> 
 
    </tbody> 
 
</table>