Semantic-UI Popup - Change HTML before initializing

Semantic-UI Popup - Change HTML before initializing

我正在使用 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 中。

为了初始化输入值,你不应该用 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