jQuery .val()/.text() 不适用于特定的 html 块答案

【问题标题】：jQuery .val()/.text() not working for a specific block of htmljQuery .val()/.text() 不适用于特定的 html 块
【发布时间】：2014-12-04 20:07:56
【问题描述】：

我正在使用带有 Yii 和 PHP 的 HandlebarsJS 来呈现页面。下面是页面中的一段 html/handlebars 代码

{{#if embed_link}}
       <p class='f_hidden_p'>
           <a href='{{embed_link}}'>
              {{embed_link}}
            </a>
       </p>
       <div class = 'link-wrapper'>
          <div class = 'link-container'>
              <a class = 'link-anchor-box'>
                  <div class = 'link-pic-wrap'>
                      <div class='playable_wrap'>
                         <div class='play_btn'></div>
                            <div class = 'link-img'></div>
                      </div>
                      <div class = 'link-text-data'>
                          <div class = 'link-text-title'> 
                             <span class = 'link-text-website'></span>
                          </div>
                          <div class = 'link-text-about'></div>
                       </div>
                   </div>
              </a>
            </div>
         </div>
{{/if}}

上述代码仅在 embed_link 为 true 时运行。在我的测试用例中，它运行时我需要使用 jQuery 从 "f_hidden_p" 获取文本。所以在我拥有的js文件中，

$(document).ready(function(){
   console.log($('.f_hidden_p').text());
   console.log($('.f_hidden_p').val());
});

由于某种原因，这会返回一个空字符串或未定义。当我检查元素并检查时，我可以看到 {{embed_link}} 的值不是空字符串。之后我尝试了，给锚标签一个唯一的 id “embed_link”并尝试了。

$(document).ready(function(){
       console.log($('#embed_link').text());
       console.log($('#embed_link').val());
});

但这也没有用。我在 HTML 中使用同样的语法尝试了相同的语法，这些 div 也位于把手块中，并且效果很好。由于某种原因，它对这个块不起作用。注意：.f_hidden_p 是隐藏的 -> 它的显示在 CSS 中是“无”。但我很确定不应该阻止 .text() 或 .val() 获取文本。

感谢您的帮助！

【问题讨论】：

试试$('.f_hidden_p').html()
你在哪里渲染你的车把模板？在服务器还是客户端？
好吧 .val() 只能从表单字段中获取值，而不是 html 内容。但是你是对的，隐藏元素不应该阻止 .text() 工作。
@user3739383 当 DOM-ready 触发（您的 console.log 调用）时，可能尚未呈现最终的 HTML/文本内容。将这些调用放在 AJAX 的完整回调中，看看会发生什么。
然后在您的 ajax 调用中执行此操作，无论是成功还是 .done()...

标签： javascript jquery html css yii

【解决方案1】：

我添加这个是为了更好的格式化...

你试过了吗？

$(document).ready(function(){
  setTimeout(function() {
   console.log($('.f_hidden_p').text());
   console.log($('.f_hidden_p').val());
  }, 2000);
});

...没有结果？

【讨论】：

OP 已经在 cmets 中指出这不起作用，并且在另一条评论中说文本是在 AJAX 调用之后呈现的。 setTimeout 不仅不能保证文本在计时器用完之前就已经存在，而且如果文本提前呈现，则会造成不必要的延迟。
我没有看到任何代码或结果。我只是想确保进行正确的测试。 ajax 调用无法保证，但如果他在检查时看到文本，则数据会在某个时候到达那里。我不是在诱导延迟......只是仔细检查目前正在进行的测试。