jQuery 将文本添加到单击时输入

Question

I am trying to use javascript to have a link created on page load and then when that link is clicked to insert content into a div.

This is where I'm at so far...

<div class="inside">
</div>

<div class="content">
<input type="textarea">
</div>

<script>
jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( '<p><a href="">Insert Content</a></p>' );
});
</script>

Fiddle: https://jsfiddle.net/03afj8fd/

Now I need to be able to insert some preset content into the input box when the generated link is clicked. Anyone point me in the right direction of an example?

Answer 1

Here is an example. Also there is no type textarea . textarea is the element tag.

Fiddle: https://jsfiddle.net/AtheistP3ace/03afj8fd/3/

HTML:

<div class="inside"></div>
<div class="content">
    <textarea></textarea>
</div>

JS:

jQuery(document).ready(function () {
    $(".inside").append('<p><a id="myLink" href="#">Insert Content</a></p>');
    $('#myLink').on('click',
        function () {
            $('textarea').val('some content');
        }
    );
});

Answer 2

You can put the preset content in the a element so that if you have so many such elements then it would be flexible as each element will have it's own preset content.

 jQuery( document ).ready(function() { jQuery( ".inside" ).append( '<p><a href="" data-preset="Preset Content">Insert Content</a></p>' ) //set up an event listner for the a element .on('click', 'p > a', function( e ) { e.preventDefault(); jQuery('.content > textarea').val( $(this).data('preset') ); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="inside"></div> <div class="content"><textarea></textarea></div>

Answer 3

jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( '<p><a href="#" id="samplelink">Insert Content</a></p>' );
});

Now you need to define .on for the a#samplelink as it was dynamically added to the DOM. ( .click() won't work)

jQuery(document).on("click", "a#samplelink", function(e){
    e.preventDefault(); // To prevent redirection from link
    $("div.content input").val("Sample Preset Content"); // Setting value of input
})

Answer 4

You can do something like this:

jQuery( document ).ready(function() {
   jQuery( ".inside" ).append( 
        jQuery('<p />').append(
            jQuery('<a href="">Insert Content</a>').on('click', function(e) {
                e.preventDefault();
                jQuery('input').val('hi');
            }) 
        )
    );
});

Answer 5

you'll want to give the link and input a class or id, and delegate an event to it.

'<p><a class='content' href="">Insert Content</a></p>'
<input class='context-input' type="textarea" />

and in your script

jQuery('.inside').on('click', '.content', function(){
  jQuery('.context-input').val('Your Presets')
})

what this did was create a delegated event so that dynamic content within .inside that has the class .content will trigger on click. this step is necessary because the .content div is not present when the origin script is loaded, and thus needs a delegated listener, instead of a direct one

Answer 6

I updated the fiddle with an example solution.

You can find it here: https://jsfiddle.net/03afj8fd/11/

jQuery( document ).ready(function($) {
   $clickMe = $('<span>Insert Content</span>');

   $clickMe.on('click', function(e) {
      e.preventDefault();
      $('#fillMe').val('test');  
   });

   $( ".inside" ).append($clickMe);
});

There are multiple ways how you can achieve this though.

I'm not sure if you need the "a" tag or if you just added it because you thought it would be needed to have it work as a clickable element - i removed it in my fiddle.