Question

我正在尝试使用javascript在页面加载时创建链接，然后单击该链接以将内容插入到div中。

这是我到目前为止的地方......

<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>

小提琴：https://jsfiddle.net/03afj8fd/

现在，我需要能够在单击生成的链接时将一些预设内容插入到输入框中。有人指出我的方向正确吗？

Answer 1

这是一个例子。此外，没有类型textarea。 textarea是元素标记。

小提琴：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

您可以将预设内容放在a元素中，这样如果您有这么多这样的元素，那么它就会灵活，因为每个元素都有自己的预设内容。

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

$scope.addContList.push(contacts[i]);

现在您需要为jQuery( document ).ready(function() { jQuery( ".inside" ).append( '<p><a href="#" id="samplelink">Insert Content</a></p>' ); });定义.on，因为它已动态添加到DOM中。（a#samplelink无效）

.click()

Answer 4

您可以这样做：

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

您需要提供链接并输入类或ID，并将事件委托给它。

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

并在您的脚本中

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

这样做会创建一个delegated event，以便.inside中具有类.content的动态内容会在点击时触发。这一步是必要的，因为加载原始脚本时.content div不存在，因此需要一个委托的监听器，而不是一个直接的监听器

Answer 6

我用一个示例解决方案更新了小提琴。

您可以在此处找到它：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);
});

虽然有多种方法可以实现这一目标。

我不确定你是否需要＆＃34; a＆＃34;标签或者你刚刚添加它，因为你认为它需要让它作为一个可点击的元素 - 我把它删除了。

jQuery在点击时添加文本输入

6 个答案: