JQuery нажмите кнопку редактирования и выбранный id не работает

Question

Я пытаюсь сделать редактирование сообщения. Но у меня есть некоторые проблемы.

Я создал этот DEMO от codepen.io.

В этой демонстрации вы можете увидеть, что есть две кнопки редактирования: (red). Когда вы нажмете первую кнопку редактирования, тогда появится область редактирования текста и изображения. Но если вы проверите консоль разработчика, вы увидите, что идентификатор изображения не является реальным идентификатором изображения. Как и нормальное первое изображение id="1" и второе изображение id="2", но после нажатия кнопки редактирования, отредактируйте область изображения ids не для второго изображения id="2" все изображение id="1" В чем проблема в моем jquery-коде.

Кроме того, как я могу поставить идентификатор изображения из <div class="del" id="here">x</div>

HTML

<div class="container"> 
    <div class="postAr" id="messageB1"> 
     <div class="postInfo"> 
     <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="1"> 
     </div> 
     <div class="postInfo"> 
     <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="2"> 
     </div> 
     <div class="ptx"> fdasfads fsasd fadsf adsf adsf adsf asd fasd f dfsas</div> 
     <div class="editBtn" name="edit" id="1">Edit1</div> 
    </div> 
</div> 
<div class="container"> 
    <div class="postAr" id="messageB2"> 
     <div class="postInfo"> 
     <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" class="ab" id="2"> 
     fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg5 
     </div> 
     <div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div> 
     <div class="editBtn" name="edit" id="2">Edit2</div> 
    </div> 
</div> 

JS

$(document).ready(function() { 
    $("body").on("click", ".editBtn", function(event) { 
     event.target.disabled = true; 
     var ID = $(this).attr("id"); 
     var selected = $("#messageB" + ID + " .postInfo img").parent().html(); 
     var currentMessage = $("#messageB" + ID + " .ptx").html(); 
     var imid = $(".postInfo img").attr("id"); 
     var editImage = $('<div class="edi"><div class="del" id="imageid">x</div>' + selected + '</div>').html(); 
     var editMarkUp = '<div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>'; 
     $("#messageB" + ID + " .ptx").html(editMarkUp); 
     $("#messageB" + ID + " .postInfo").html(editImage); 
     var data = $('#txtmessage_' + ID).val(); 
     $('#txtmessage_' + ID).focus(); 
     $('#txtmessage_' + ID).val(data + ' '); 
    }); 
    $("body").on("click", ".cNeD", function(event) { 
     $(".editBtn").prop('disabled', false); 
     var ID = $(this).attr("id"); 
     var currentMessageText = $("#txtmessage_" + ID).html(); 
     $("#messageB" + ID + " .ptx").html(currentMessageText); 
    }); 
}); 

Answer 1

$(document).ready(function() { 
 
    $("body").on("click", ".editBtn", function(event) { 
 
     event.target.disabled = true; 
 
     var ID = $(this).attr("id"); 
 
     var selected = $("#messageB" + ID + " .postInfo img").parent().html(); 
 
     var currentMessage = $("#messageB" + ID + " .ptx").html(); 
 
     $(".postInfo", $("#messageB" + ID)).each(function() { 
 
     $('.edi .del', $(this)).show(); 
 
    }); 
 

 
    var editMarkUp = '<div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>'; 
 

 
    $("#messageB" + ID + " .ptx").html(editMarkUp); 
 
    var data = $('#txtmessage_' + ID).val(); 
 
    $('#txtmessage_' + ID).focus(); 
 
    $('#txtmessage_' + ID).val(data + ' '); 
 
}); 
 
$("body").on("click", ".cNeD", function(event) { 
 
    $(".editBtn").prop('disabled', false); 
 
    var ID = $(this).attr("id"); 
 
    var currentMessageText = $("#txtmessage_" + ID).html(); 
 

 
    $("#messageB" + ID + " .ptx").html(currentMessageText); 
 
    
 
    $(".postInfo", $("#messageB" + ID)).each(function() { 
 
     $('.edi .del', $(this)).hide(); 
 
    }); 
 
    }); 
 
});

.container { 
 
    margin:0px auto; 
 
    width:100%; 
 
    max-width:550px; 
 
    background-color:#d8dbdf; 
 
    border-radius:2px; 
 
    margin-top:50px; 
 
    padding:10px; 
 
    overflow:hidden; 
 
} 
 

 
.postAr { 
 
    padding:20px; 
 
    box-sizing:border-box; 
 
    width:100%; 
 
    background-color:#f5f5f5; 
 
    float:left; 
 
    position:relative; 
 
} 
 
.cNeD { 
 
    background-color:blue; 
 
    color:#ffffff; 
 
    padding:5px; 
 
    width:100px; 
 
} 
 
.postInfo { 
 
    position:relative; 
 
    width:100%; 
 
    float:left; 
 
} 
 
.editBtn { 
 
    width:50px; 
 
    padding:10px; 
 
    background-color:red; 
 
    float:left; 
 
    position:relative; 
 
    text-align:center; 
 
    color:#ffffff; 
 
    cursor:pointer; 
 
} 
 
.del { 
 
    position:absolute; 
 
    right:0px; 
 
    width:20px; 
 
    height:20px; 
 
    background-color:red; 
 
    border-radius:50%; 
 
    -webkit-border-radius:50%; 
 
    text-align:center; 
 
    line-height:20px; 
 
    color:#ffffff; 
 
    font-weight:bold; 
 
    z-index:1; 
 
} 
 
.postInfo img { 
 
    width:100%; 
 
} 
 
.ptx { 
 
    width:100%; 
 
    float:left; 
 
    padding:10px; 
 
    box-sizing:border-box; 
 
} 
 
.edi { 
 
    position:relative; 
 
} 
 
.edi img { 
 
    border-radius:2px; 
 
    width:100%; 
 
} 
 
/* hide delete button by default */ 
 

 
.edi .del { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="postAr" id="messageB1"> 
 
    <div class="postInfo"> 
 
     <div class="edi"> 
 
     <div class="del" id="1">x</div> 
 
     <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="1"> 
 
    </div> 
 
    </div> 
 
    <div class="postInfo"> 
 
    <div class="edi"> 
 
     <div class="del" id="2">x</div> 
 
     <img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" class="ab" id="2"> 
 
    </div> 
 
    </div> 
 
    <div class="ptx"> fdasfads fsasd fadsf adsf adsf adsf asd fasd f dfsas</div> 
 
    <div class="editBtn" name="edit" id="1">Edit1</div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="postAr" id="messageB2"> 
 
    <div class="postInfo"> 
 
    <div class="edi"> 
 
     <div class="del" id="2">x</div> 
 
     <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" class="ab" id="2"> 
 
    </div> 
 
    fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg5 
 
    </div> 
 
    <div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div> 
 
    <div class="editBtn" name="edit" id="2">Edit2</div> 
 
</div> 
 
</div>