CODEWITHSUNDEEP
jquerydom-manipulation
user1919667
user1919667

Reputation: 3

Insert element within a div, and in that div a specific element with a class

So, I'm not getting the hand of it.. What I'm trying to do is add a script element within a div that has an input tag with the class 'colorpick'.

<div class="field">
    <input type="text" value="#fefefe" class="colorpick" >
</div>

So what I'm trying to achieve is this:

<div class="field">
    <input type="text" value="#fefefe" class="colorpick" >
    <script type="text/javascript">$( function() { $('.colorpick').colorpicker(); }); </script>
</div>

And this is how I add inline-script with an external file

(function ($) {
    $(document).ready(function () {
        var code = "$( function() { $('.colorpick').colorpicker(); }); ";
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.text = code;
        $("input.colorpick").insertAfter(script);
    });
 })(jQuery);

But somehow I can't get it to work and it really bugs me.

Upvotes: 0

Views: 78

Answers (2)

Alexander
Alexander

Reputation: 23537

Answering your question, you want to use $.fn.after not $.fn.insertAfter.

$("input.colorpick").after(script);

The former inserts the parameter after the matched elements, while the latter inserts the matched objects after the parameter.

The .after() and .insertAfter() methods perform the same task. The major difference is in the syntax—specifically, in the placement of the content and target. With .after(), the selector expression preceding the method is the container after which the content is inserted. With .insertAfter(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted after the target container.

Having said that, I also think that you should be executing the code directly instead.

(function($){
  $(function(){
    $('.colorpick').colorpicker();
  });
})(jQuery);

Upvotes: 0

Nirmi
Nirmi

Reputation: 1119

Why r you trying to add script using script? You can add the input field by jquery and initialize the colorpicker after that by calling

$('.colorpick').colorpicker();

Upvotes: 1

Related Questions