我有一个采购订单的表单，其中的项目使用django inline_formset以表格形式呈现。在inline_formset的形式内，搜索图标被放置在产品选择形式旁边，使得当用户将点击它时，将弹出模态，向用户提供能够搜索产品的功能。并且当用户将点击搜索页面上的产品时，主PO表单中的对应产品选择表单将随着搜索到的产品而更新/改变。还有一个“添加更多项目”按钮，它将向inline_formset添加新表单，从而为用户提供动态添加更多PO项目的功能（使用JavaScript）。
所有上述功能都可以正常工作，除了在新添加的表单中，搜索图标无法执行嵌入在图标中的hx-get，如下所示：
在pod_form.html中，

td>
    <div class="input-group">
        {{ field }}{% if field.name == 'product' %}
        <i class="fa-solid fa-magnifying-glass ms-1 d-flex align-items-center fa-icon" 
            hx-get="{% url 'product_search_popup' %}" hx-target="#dialog"></i>
        {% endif %}
    </div>
    <!-- dispaly field errors if there's any -->
    {% for error in field.errors %}
    <span style="color: red">{{ error }}</span>
    {% endfor %}
</td>

这个html片段被嵌入到text/html类型的脚本中，如下所示：

<script type="text/html" id="pod-template">
    <tr id="pod-__prefix__">
        {% for fields in po_inlines.empty_form.hidden_fields %}
            {{ fields }}
        {% endfor %}
    
        {% for field in po_inlines.empty_form.visible_fields %}
            {% include 'purchases/partials/pod_form.html' %}
        {% endfor %}
    </tr>
</script>

利用这样编码的JavaScript，

<script>
    // PO Detail Inline
    var btnAddMorePOitems = document.querySelector('#pod-add-more')
    // on click of pod-add-more button, add new form
    btnAddMorePOitems.addEventListener('click', (ev) => {
        ev.preventDefault();
        // get document objects
        let tbodyPOitems = document.querySelector('#po-items')
        let podTemplate = document.querySelector('#pod-template')
        let podTotalForms = document.querySelector('#id_pod-TOTAL_FORMS')

        // build-up the content
        let count = tbodyPOitems.children.length
        let tmplMarkup = podTemplate.innerHTML
        let compiledTmpl = tmplMarkup.replace(/__prefix__/g, count)

        // insert a new row of the table representing the PO detail inline
        let newRow = tbodyPOitems.insertRow(count)
        newRow.outerHTML = compiledTmpl
        // update the form count
        podTotalForms.setAttribute('value', count + 1)

        // TODO: product search icon on_click event of newly added form
        searchIcon = document.querySelector(`#pod-${count}`).querySelector('.fa-magnifying-glass');
        searchIcon.addEventListener('click', (ev) => {
            ev.preventDefault()
            toggleActiveSearchIcon(ev.currentTarget)
        })
    })

    // event handler for search icon on-click
    var searchIcons = document.querySelector('#po-items').querySelectorAll('.fa-magnifying-glass');
    searchIcons.forEach(el => {
        el.addEventListener('click', (ev) => {
            ev.preventDefault()
            toggleActiveSearchIcon(el)
        })
    })

    // FUNCTION Definition
    function toggleActiveSearchIcon(el) {
        // mark the search icon as active
        document.querySelector('i.fa-icon.active')?.classList.remove('active')
        el.classList.add('active')
        // mark the select-form as active, which will be used as the hx-target
        // in the product_search modal page
        document.querySelector('select.active')?.classList.remove('active')
        el.previousElementSibling.classList.add('active')
    }
</script>

在浏览器检查器工具中，我可以验证属性hx-get和hx-target是否出现在新添加表单的搜索图标中。我还可以验证单击事件是否按预期工作。但是我发现对应于hx-get中指定的url的视图没有被执行。对此有什么想法吗？
如果您遇到类似的问题，请分享您的解决方案。
PS：1.当hx-target属性被移除或替换时，同样的问题行为。2.删除hx-get属性并替换为锚标记，触发视图，从而在href中指定的页面上显示数据。