Question

我有一个.outerdiv，其中通过脚本动态添加了html元素。在该div内有一个锚点，我想绑定一个事件或访问我使用jquery尝试访问的内部文本，但失败了，请帮忙。

更新我还要提到的一件事是，我无法控制script.js并假定它像插件。我能做的就是通过我的js。更新根据建议，我将我的警报包含在document.ready仍然无法正常工作

> this is a script.js code which i don't have control, i cant edit this.

  $(document).ready(function () {
    $(".outdiv").append("<p><a href='#'>i am a link</a></p>");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
    <script>
      $(document).ready(function () {
    alert($(".outdiv a").text());
    });
    </script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

Answer 1

您可以尝试以下方法：

 <ion-list id="sidenav" *ngFor="let p of appPages;index as i">
 <ion-item lines="full" (click)="toggleLevel1('idx'+i)" [ngClass]="{active: isLevel1Shown('idx'+i)}"
    lines="full">
 <ion-icon slot="start" [name]="p.icon"></ion-icon>
   {{p.list_header}}
 <ion-icon color="dark" slot="end" *ngIf="p.subList_title != null" [name]="isLevel1Shown('idx'+i)  ? 'arrow-dropdown' : 'arrow-dropright'">
  </ion-icon>
  </ion-item>
  <ion-item-group *ngFor="let sub of p.subList_title" submenu [class.visible]="isLevel1Shown('idx'+i)">
  <ion-item submenu-item *ngIf="isLevel1Shown('idx'+i)" lines="none">{{sub.title}}</ion-item>
  </ion-item-group>
  </ion-list>

$(document).ready(function () {
    $(".outdiv").append("<p><a href='#'>i am a link</a></p>");
    alert($(".outdiv a").text());
  });

Answer 2

问题出在script的defer属性上：

具有defer属性的脚本将阻止触发DOMContentLoaded事件，直到脚本加载并完成评估为止。

这最终导致在所有脚本执行完后追加元素，因此在先前的脚本代码中，该元素不可用。从脚本标记中删除属性defer，您的脚本应为：

<script src="/script.js"></script>

您可以将警报添加到链接之后：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js"></script><!---this script i have written in js part of snippset"-->
    <script>
      $(document).ready(function () {
        $(".outdiv").append("<p><a href='/tt'>i am a link</a></p>");
      });
    </script>
    <script>
      $(document).ready(function () {
        alert($(".outdiv a").text());
      });
    </script>
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
  </body>
</html>

Answer 3

您正在document ready中填充一个标签（页面完全加载时），但是您正在警告页面加载期间（尚不存在）内容。因此，只需将警报放在document ready块中即可。

Answer 4

您可以在动态文件中准备好的文档中使用警报功能

$(document).ready(function(){
   alert($(".outdiv a").text());
});

Answer 5

使用holdReady

$(document).ready(function() { 
  $.holdReady( true );
      $.getScript( "https://button.glitch.me/button.js", function() {// you can use your script url "/script.js" 
      alert($(".outdiv a").text());
      $.holdReady( false );
    });
});

  $(document).ready(function(){
    $(".outdiv").append("<p><a href='#'>i am a link</a></p>");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello!</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css">
    
    <!-- import the webpage's javascript file -->
    <script src="/jquery-3.3.1.min.js"></script>
    <script src="/script.js" defer></script><!---this script i have written in js part of snippset"-->
    
  </head>  
  <body>
    <h1>Hi there!</h1>
    
    <p>
      I'm your cool new webpage. Made with <a href="https://glitch.com">Glitch</a>!
    </p>
    <div class="outdiv">
      
      
    </div>

    <!-- include the Glitch button to show what the webpage is about and
          to make it easier for folks to view source and remix -->
    <div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
    <script src="https://button.glitch.me/button.js"></script>
    <script>
      

$(document).ready(function() { 
$.holdReady( true );
  $.getScript( "https://button.glitch.me/button.js", function() {
  alert($(".outdiv a").text());
  $.holdReady( false );
});
});
    </script>
  </body>
</html>

Answer 6

在将元素添加到DOM之前，无法从锚标记中提取文本。因此，在元素初始化之前执行脚本将不起作用。

另一方面，您还提到了将事件绑定到该锚标记。好吧，使用on方法是可能的。您可以尝试以下方法：

$(".outdiv").on('click', 'a', function() {
  console.log('clicked');

  // You can extract the text of the clicked anchor here
  console.log($(this).text());
});

无法使用jQuery获取锚标记值

6 个答案: