Javascript 将printthis按钮动态添加到某个类_Javascript_Jquery_Html_Printthis

Javascript 将printthis按钮动态添加到某个类

javascript jquery html

Javascript 将printthis按钮动态添加到某个类,javascript,jquery,html,printthis,Javascript,Jquery,Html,Printthis,抱歉，如果我遗漏了什么（我是JS的初学者）。我希望使用JQuery插件向任何具有“printdiv”类的div添加一个打印按钮。我使用Jquery对按钮和div类进行编号，并将所需的Jquery代码附加到页面底部的脚本标记中这是我用我正在使用的代码制作的代码笔这里是它的代码形式 <html lang="en"> <head> <meta charset="UTF-8"> <title>Document&l

抱歉，如果我遗漏了什么（我是JS的初学者）。我希望使用JQuery插件向任何具有“printdiv”类的div添加一个打印按钮。我使用Jquery对按钮和div类进行编号，并将所需的Jquery代码附加到页面底部的脚本标记中

这是我用我正在使用的代码制作的代码笔

这里是它的代码形式

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="printthis/printThis.js"></script>
    </head>
    <body>
        <div class="printdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem voluptatibus, magni, alias eaque dolor quisquam placeat, similique atque ratione fugiat impedit nam numquam accusantium. Deserunt reiciendis nulla omnis necessitatibus, quo.</p></div>
        <div class="printdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit labore commodi, magnam corrupti dignissimos hic soluta. Distinctio quod saepe, tempora inventore ipsum, eligendi, dignissimos, eos recusandae perspiciatis odit consequuntur! Optio.</p></div>
        <div class="printdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate distinctio fugiat earum, quibusdam soluta ipsa voluptas porro nostrum cupiditate vel modi nesciunt sint rem, vitae id exercitationem debitis, saepe eius?</p></div>
        <script>
        $(function () {
            // print divs
            var i = 1;
            $("body script").append('$(document).ready(function () {');
            $('.printdiv').each(function(){
                $(this).removeClass('printdiv').addClass('printdiv'+i);
                $('.printdiv'+i).prepend('<button type=\"button'+i + '\" class=\"btn btn-primary printbutton' +i + '\">Print<\/button>');
                var printcode = '\r\n        $(\'.printbutton'+i + '\').click(function () {\r\n            $(\'.printdiv'+i + '\').printThis();\r\n        });';
                $("body script").append(printcode);
                i++;
            });
            $("body script").append('\r\n});');
        });
        </script>
    </body>
</html>

生成的代码应该是正确的，但打印按钮不起作用：（

问题是，主体中附加代码的

脚本已经被js引擎解析/处理，因此无法更改其内容
您应该在内存中创建一个脚本
，然后在填充后将其附加到DOM中
$(function() {
  // print divs
  var i = 1;
  var script = $('<script>');
  script.append("$(document).ready(function () {");
  $(".printdiv").each(function() {
    $(this)
      .removeClass("printdiv")
      .addClass("printdiv" + i);
    $(".printdiv" + i).prepend(
      '<button type="button' +
        i +
        '" class="btn btn-primary printbutton' +
        i +
        '">Print</button>'
    );
    var printcode =
      "\r\n        $('.printbutton" +
      i +
      "').on('click', function () {\r\n            $('.printdiv" +
      i +
      "').printThis();\r\n        });";
    script.append(printcode);
    i++;
  });
  script.append("\r\n});");
  script.appendTo('body');
});

$（函数（）{
//打印div
var i=1；
变量脚本=$（''）；
script.append（“$（document）.ready（函数（）{”）；
$（“.printdiv”）.each（函数（）{
$（本）
.removeClass（“printdiv”）
.addClass（“printdiv”+i）；
$（“.printdiv”+i）.prepend(
“打印”
);
var打印码=
“\r\n$（”.printbutton”+
我+
“）。在（'click'，函数（）{\r\n$（'.printdiv'+
我+
“）。printThis（）；\r\n}）；”；
script.append（打印代码）；
i++；
});
script.append（“\r\n}”）；”；
script.appendTo（'body'）；
});
实现您想要的目标的更简单方法：
更改为html（包括源代码中的“打印”按钮）：
这个jQuery表示，单击按钮
，找到与类printDiv
匹配的按钮的父div
，并将其作为printThis
的选择器传递
此外，我建议将所有javascript/jQuery从页面移到它自己的文件中
所以你会：
<script src="path/to/jQuery"></script>
<script src="path/to/printThis"></script>
<script src="path/to/your/custom/javascript"></script>



重要提示：

动态添加
通常是不必要的，并且是影响DOM的一种非常迂回的方式
使用$。on（'click'，…
而不是$。click
。对于$。click
将为与选择器匹配的每个元素创建单独的处理程序，并且仅对DOM中已经存在的元素有效（因此您在初始代码中遇到问题）。$on
适用于动态添加的元素
确保文件printThis.js位于您引用的正确文件夹中，它显示在Chrome DevTools的源代码中，因此这应该是一个好问题：为什么打印按钮不出现在源代码中而不是附加它们？如果只是打印特定元素，有更简单的方法可以做到这一点，并且只传递选择ctor来打印此内容。内容贡献者希望能够在所见即所得中选择文本副本并向其添加打印按钮。所见即所得支持向所选内容（在tinyMCE中）添加“样式”（类）。请参阅下面我的答案-您只需附加一个-无需索引等，然后使用jquery查找父容器并将其传递给打印。这种方法将大大简化您的代码库。啊，我明白了。非常好的解释。谢谢！
<div class="printdiv">
    <p>Lorem ipsum dolor sit amet</p>
    <button class="btn btn-primary printbutton">Print</button>
</div>
<div class="printdiv">
    <p>consectetur adipisicing elit</p>
    <button class="btn btn-primary printbutton">Print</button>
</div>
<div class="printdiv">
    <p>vitae id exercitationem debitis</p>
    <button class="btn btn-primary printbutton">Print</button>
</div>

$('.printButton').on('click', function(){
    var $parent = $(this).parent('.printdiv');
    $parent.printThis();
});

<script src="path/to/jQuery"></script>
<script src="path/to/printThis"></script>
<script src="path/to/your/custom/javascript"></script>