How to fix html button click copy content browser inconsistency in jQuery?

Question

I have the following sample code, when I click on the top button, it's content will be copied to the bottom button, this works fine in Firefox and IE, but in Chrome, it only copies the character you clicked on, not the content of the whole button, but if you click on the edge or 4 corners of the upper button, the whole content will be copied to the bottom button, how do I fix the behavior in Chrome so it will be consistent with the other browsers ?

<HTML>
  <HEAD><META http-equiv="Content-Type" content="text/html; charset=utf-8"></HEAD>

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

  <SCRIPT>
  $(document).ready(function()
  {
    $('button').click(function(event)
    {
      var Clicked_Button=event.target;
      $('#Target_Button').html($(Clicked_Button).html());
    });
  });
  </SCRIPT>

  <BODY>
  <CENTER>

    <BUTTON id=Source_Button style="width: 78px; height: 78px;" type=button>
      <TABLE width=60 border=0 cellspacing=0 cellpadding=5>
        <TR>
          <TD align=Center><FONT color=blue size=4>A</FONT></TD>
          <TD align=Center><FONT color=blue size=4>B</FONT></TD>
        </TR>
        <TR>
          <TD align=Center><FONT color=blue size=4>C</FONT></TD>
          <TD align=Center><FONT color=blue size=4>D</FONT></TD>
        </TR>
       </TABLE>
    </BUTTON>
  <P>
  <BUTTON id=Target_Button style="width: 78px; height: 78px;" type=button></BUTTON>

  </CENTER>
  </BODY>
</HTML>

You should use `var Clicked_Button=event.currentTarget;` Please see this question for more details http://stackoverflow.com/a/10086501/5642735 — alxersov, Feb 06 '16 at 23:30
@aersh : excellent, right on target, thanks, if you make this an official answer, I will select it ! — Frank, Feb 07 '16 at 03:45

score 1 · Answer 1 · answered Feb 08 '16 at 03:24

1

Within an event handler this is element that event occurred on so you can use $(this).html()

$('button').not('#Target_Button').click(function(event){      
   $('#Target_Button').html($(this).html());
});

answered Feb 08 '16 at 03:24

charlietfl

170,828
13
121
150

score 0 · Accepted Answer · answered Feb 07 '16 at 14:43

0

Thanks to @aersh's suggestion, the correct answer is : var Clicked_Button=event.currentTarget;

answered Feb 07 '16 at 14:43

Frank

30,590
58
161
244

How to fix html button click copy content browser inconsistency in jQuery?

2 Answers2