jquery - change between two html element on click

Question

i have two html element and i want to change it with another by clicking on one. this is my code and it works but one time:

<div class="ic_lk"></div>
<?php $pic=0;?>
<script>
$('document').ready(function(){
    var pic= <?php echo $pic;?>;
if(pic==0) {
        $('.ic_lk').html('<img class="li_ik1" src="_pc/lk.png"></img>'); 
        }else if(pic>0){
        $('.ic_lk').html('<img class="li_ik2" src="_pc/lkm.png"></img>'); 
    }

$(".li_ik1").on("click",function(){
    $(this).replaceWith('<img class="li_ik2" src="_pc/lkm.png"/>');
    });
$(".li_ik2").on("click",function(){
    $(this).replaceWith('<img class="li_ik1" src="_pc/lk.png"/>');
    });
}); 
</script>

thanks

score 1 · Answer 1 · answered Dec 02 '18 at 21:42

Your listener is being set only on document ready, however your element is not present yet. So you have to add the listener after you add the element:

$('document').ready(function() {
  var pic = 0; //<?php echo $pic;?>;
  if (pic == 0) {
    $('.ic_lk').html('<img class="li_ik1" src="https://picsum.photos/200/200?image=1" />');
    setPic1();
  } else if (pic > 0) {
    $('.ic_lk').html('<img class="li_ik2" src="https://picsum.photos/200/200?image=2" />');
    setPic2();
  }
});

function setPic1() {
  $(".li_ik1").on("click", function() {
    $(this).replaceWith('<img class="li_ik2" src="https://picsum.photos/200/200?image=2"/>');
    //
    setPic2();
  });
}

function setPic2() {
  $(".li_ik2").on("click", function() {
    $(this).replaceWith('<img class="li_ik1" src="https://picsum.photos/200/200?image=1"/>');
    //
    setPic1();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ic_lk"></div>
<?php $pic=0;?>

score 0 · Accepted Answer · answered Dec 02 '18 at 21:22

0

Since .li_ik2 is dynamic, meaning that it's not on the page at the time of page load, the second bind won't work. As outlined here, you should do something like this:

$(document).on("click", ".li_ik2", function(){

But of course, check which version of JQuery you have first.

answered Dec 02 '18 at 21:22

Doug F

894
2
13
18

Can you post your updated code? Here's the test I made to do this: https://jsbin.com/punifaweji/1/edit?html,js,console,output – Doug F Dec 02 '18 at 21:32
i chane it like this:$('document').on("click", ".li_ik1",function(){ $(this).replaceWith(''); }); $('document').on("click", ".li_ik2",function(){ $(this).replaceWith(''); }); – 11111111111111111 Dec 02 '18 at 21:38
Don't use quotes in the selector for document. It should just be $(document). – Doug F Dec 02 '18 at 21:40
i test that too.your test shows only one 1,2 in console. i want change on every click – 11111111111111111 Dec 02 '18 at 21:41
Glad to help out :) – Doug F Dec 02 '18 at 21:42

jquery - change between two html element on click

2 Answers2