how to replace only last text inside <div> tag

Page 1 of 1

2 Replies - 647 Views - Last Post: 14 July 2011 - 11:13 PM

#1 vikas_naranje  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 23-January 09

how to replace only last text inside <div> tag

Posted 14 July 2011 - 12:46 PM 

<script type="text/javascript" language="javascript">
	$(document).ready(function(){
		$('#second').click(function(){
			$('div#first').html(function(i,v){
			  return v.replace(/[0-9]+/g,'XYZ9876');
			});
			alert('Changed');
		});
	});
</script>

<div id="first">
   <div id="second">[edit]</div>
   0123
</div>


I'm trying to replace the only text "ABC0123" inside #first and every thing should remain the same like:
<div id="first">
   <div id="second">[edit]</div>
   XYZ9876
</div>



By using above code resolve this problem for first click.
But when i click second or third or more time, click event not working. i have to write such code that clicking on any number of time it should fire the click event. Can anyone suggest me the right way to do this.

Is This A Good Question/Topic? 0
  • +

Replies To: how to replace only last text inside <div> tag

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 2899
  • View blog
  • Posts: 7,555
  • Joined: 08-June 10

Re: how to replace only last text inside <div> tag

Posted 14 July 2011 - 03:28 PM

I’m not completely certain, but I think that while changing the content of the first div, you delete the event handler on the second.

why I think that: $().html() uses the innerHTML property. jQuery completely replaces the content of the first div, thus deleting its original content first and adds the new content according to the function given (the HTML source code does not contain any event handlers). ergo, you delete any event handlers set up within the realm of innerHTML.
Was This Post Helpful? 0
  • +
  • -

#3 vikas_naranje  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 23-January 09

Re: how to replace only last text inside <div> tag

Posted 14 July 2011 - 11:13 PM

I found something interesting.

jquery .detach() method which works exactly same as .remove() but it preserve remove element's event handler. 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style>p.red { color: red; }</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( init );

function init() {

  // Assign a click event to each div's paragraph
  $("#myDiv1>p").click( function() { $(this).toggleClass("red"); } );
  $("#myDiv2>p").click( function() { $(this).toggleClass("red"); } );

  // Remove and reattach #myDiv1's paragraph
  var myDiv1Para = $('#myDiv1>p').remove();
  myDiv1Para.appendTo('#myDiv1');

  // Detach and reattach #myDiv2's paragraph
  var myDiv2Para = $('#myDiv2>p').detach();
  myDiv2Para.appendTo('#myDiv2');
}

</script>

</head>
<body>

  <div id="myDiv1">
    <p>A paragraph of text</p>
  </div>

  <div id="myDiv2">
    <p>Another paragraph of text</p>
  </div>

</body>
</html>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1