合并一个从链接传递到jQuery模组的变量，稍后通过ajax发布

incorporating a variable passed from link into jQuery modal later POSTed via ajax

本文关键字：变量 发布 ajax jQuery 一个 链接 合并      更新时间：2023-09-26

我想将变量从一组链接传递到一个通用的jQuery模式，但是在捕获变量时遇到问题。

我有一组链接，它们都调用相同的模态(伏特加熊称为Remodal 的jQuery插件(：

    <a href='#mailmodal' data-remodal-target='mailmodal' data-jobid='1'>Email job</a>
    <a href='#mailmodal' data-remodal-target='mailmodal' data-jobid='2'>Email job</a>
    <a href='#mailmodal' data-remodal-target='mailmodal' data-jobid='3'>Email job</a>

模态包含一个表单(在单独的步骤中通过 AJAX 提交(。 模态/窗体的标记如下所示：

    <div class="remodal" id='mailmodal' data-remodal-id="mailmodal" >
        <form id='mailmodal_form' action="" method="post">
        . . . 
        <input type="submit">
        </form>
    </div>

我想将 jobid 变量传递到表单中，但在用户单击链接以实际打开模态之前，表单已经发送到浏览器。

此模态是在我不想直接破解的 jQuery 插件中触发的，所以我无法访问点击事件块，或者我可以轻松地从触发链接中捕获属性。

Remodal 已经记录了它的方法和事件，但我很难弄清楚如何(以及何时(抓取变量并将其传递到表单中。 我认为将变量从链接获取到表单中的最明显方法是在窗口打开时捕获变量，并将其插入表单中的隐藏字段中。

    <div class="remodal mailme-modal" id='mailmodal' data-remodal-id="mailmodal" >
        <form id='mailmodal_form' action="" method="post">
        <input type="hidden" name='link_jobid' id='link_jobid' value='placeholder'>

我想我会直接从链接中捕获它：

    $('a[href="#mailmodal"]').click(function() {
         var jid = JSON.parse($(this).attr("data-jobid"));
         $('#link_jobid').val( jid );
    });

但我不是以这种方式打开模态，而是控制此事件的重新模态插件。

我试图像这样捕获属性：

    $(document).on('opening', '.remodal', function () {
        var jid = $(this).attr("id");
        alert( 'The jobid is ' + jid );
        $('#link_jobid').val( jid );
    }

但这会获取重新模态窗口的 id，而不是调用链接。

    "The job id is mailmodal"

我做错了吗？ 如何从调用链接捕获变量并将其转换为模态形式？

编辑

我能够让这个工作，感谢下面的 Norlihazmey Ghazali - 答案非常简单：

$("[data-remodal-target='mailmodal']").click(function(){
    var jid = $(this).data('jobid');
    // alert( 'The jobid is ' + jid );
    $('#link_jobid').val( jid );
});

谢谢大家 - 喜欢这个网站！

也许您需要使用全局变量、定义的全局变量data-jobid赋值并将值分配给该变量，最后让事件在触发时赶上它。尝试以下代码(不确定是否有效(：

<script>
  // declare global var
  var gJobId;
  // register click event for anchor
  $("[data-remodal-target='mailmodal']").click(function(){
    // assign into global var
    gJobId = $(this).data('jobid');
  });
  $(document).on('opening', '.remodal', function () {
    // let catch the global var
    var jid = gJobId;
    alert( 'The jobid is ' + jid );
    $('#link_jobid').val( jid );
  });
</script>
相关文章：