jQuery After() method doesn't work with id attribute?

StackOverflow https://stackoverflow.com/questions/4068999

Question

The below code is working fine. But if i change the html string in newPara() to <textarea></textarea><button id="someId">Save</button> or <textarea></textarea><input type="button" value="Save"/> its not working. What is the problem in this?

I need that id attribute to remove the newly attached html.

Any Suggestions!

Thanks!

<html>
  <head>
    <style>
      p { background:yellow; font-weight:bold; cursor:pointer; padding:5px; }
      p.over { background: #ccc; }
      span { color:red; }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body>
    <div id="aDiv">
      <p>Click me!</p>
    </div>

    <span></span>
    <script>
      $("body").delegate("p", "click", newPara);
      $("body").undelegate("button", "click", newPara).find("#adiv").html("<p>Click me!</p>");
      function newPara() {
        var html = "<textarea></textarea><button>Save</button>";
        $(this).after(html);
      }
    </script>
  </body>
</html>
Was it helpful?

Solution

My only guess would be that you're using double quotes to create the string literal, but also using them inside the string, therefore terminating it early.

If so, this:

"<textarea></textarea><button id="someId">Save</button>"

should be:

'<textarea></textarea><button id="someId">Save</button>'

Notice that I used single quotes on the outside, so that the inside ones don't close the string.

Try it out: http://jsfiddle.net/QQrHr/

The example uses your exact code. The only change I made was to use singe quotes around the string.

You could also escape the inner quotes if you wanted:

"<textarea></textarea><button id=\"someId\">Save</button>"

OTHER TIPS

Are you looking for append instead of after? Or even http://api.jquery.com/insertAfter/ ?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top