Question

我想将一组链接中的变量传递给常见的jQuery模式，但是在捕获变量时遇到了问题。

我有一组链接，它们都调用相同的模态（VodkaBears称为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插件中触发的，我不想直接破解，所以我无法访问click事件块，或者我可以轻松地从触发链接中捕获属性。

Remodal记录了它的methods and events，但我无法弄清楚如何（以及何时）获取变量并将其传递给表单。我认为从链接到表单中获取变量的最明显方法是在窗口打开时捕获变量，并将其插入表单中的隐藏字段。

    <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 );
    });

但是我没有以这种方式打开模态，控制此事件的remodal插件。

我试图像这样捕获属性：

    $(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 );
});

谢谢大家 - 热爱这个网站！

Answer 1

也许你需要通过使用全局变量，定义的全局变量并将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>

将从链接传递的变量合并到jQuery模式中，稍后通过ajax进行POST

1 个答案: