Semantic-UI Popup - Change HTML before initializing

Question

我正在使用 Semantic-UI 并有一个带有输入字段（搜索字段）的弹出窗口。弹出窗口是 initialized/opened "on: 'click'"，但我想在用户打开弹出窗口之前使用 javascript 为输入字段设置一个值。

尝试使用

document.getElementById("sok_tekst").value = input;

只会导致

Uncaught TypeError: Cannot set property 'value' of null

当我查看控制台时，我看到 HTML 代码包含带有输入字段 (id="sok_tekst") 的弹出窗口，但看起来我 "can't reach it"在初始化之前使用 javascript。

我觉得我已经尝试了所有方法，看起来我需要在向输入字段添加值之前打开弹出窗口。

这是一个DEMO

有人对此有什么绝招吗？？

谢谢！

出于好奇：我将输入字段用作 table/work 计划中的搜索字段。当 table 重绘时，用户更改周数，弹出窗口也会重绘。我试图保留搜索值，并将其放回输入字段中，在新的弹出窗口中，在新的 table 中。

Answer 1

为了初始化输入值，你不应该用 data-html="..." 指定弹出内容，这不会让更改值导致输入尚未创建 （这就是为什么你正在获取 Cannot set 属性 'value' of null) ，所以应该从预先存在的 HTML content 更改它，所以在弹出窗口中改用 popup: $('#YourContentSelector'), setting 来设置内容，然后您就可以使用 :$('#input_test').val('test'); 更改输入值，如下所示：

HTML:

<!-- Popup Button -->
<i class="search link icon sok"></i>
<!-- Popup Button -->

<!-- Popup Content -->
<div class='ui form popup hidden' id="content"><!-- hidden class added so it won't be shown when it's loaded   -->
    <div class='field'>
        <div class='ui icon input'>
            <input type='text' placeholder='Input' id='input_test'>
            <i class='search icon'></i>
        </div>
    </div>
</div>
<!-- Popup Content -->

JS(jQuery)

$(document).on('click', '.search.sok', function() {
  $('#input_test').val('test');
    $(this)
       .popup({
           popup: $('#content'),
            on:'click'
       })
       .popup('show');

});

这是一个有效的 Demo

Docs

Semantic-UI Popup - Change HTML before initializing

Semantic-UI Popup - Change HTML before initializing

javascript

popup

semantic-ui