Materialise CSS - 将数据传递给 sideNav

Question

我正在为我的最新项目使用 materializeCss，但我遇到了问题。

我用sideNav打开一个'modal'里面有一个联系表。

此联系表应在多种场合使用，并且应根据用户单击的按钮预先填写不同的信息。

让我举个例子来解释一下：

如果用户点击 Send Message 则表单输入标题应该类似于

<input type='text' id='title' name='title' readonly value="General message">

如果用户点击按钮 Request Candy 那么这个输入应该类似于

<input type='text' id='title' name='title' readonly value="I want candies!">

由于 sideNav 通过单击

类型的元素打开

<a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>

我想对点击做出反应

$(document).on('click', '.button-collapse', function() {
    console.log('got it!');
    $('#title').val('My custom message from data-* or something..');
})

但这不起作用，因为可能会实现劫持这些 a.button-collapse 上的点击事件。我什至没有得到控制台日志 got it!.

有人知道将一些数据传递到新打开的 sideNav 的方法吗？

更新：

jsfiddle

Answer 1

<input> 是一个 "head only" 标签 - 没有结束 </input> 并且元素没有内容。

所以你的标记应该像

<input type='text' id='title' name='title' value='General message' readonly></input>

更新：

更改为：

$('.button-collapse').on('click', function() {
    $('#title').val($(this).data('title'));
    console.log('I have been clicked');
  })

它会起作用的。似乎文档或框架正在消耗事件，因此您无法在该级别处理它。

Answer 2

您的事件处理程序中存在错误，这会起作用。

$('.button-collapse').sideNav({
  menuWidth: 200, // Default is 240
  edge: 'right', // Choose the horizontal origin
  //closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
  //draggable: true // Choose whether you can drag to open on touch screens
});


$(".button-collapse").click((e) => {
  $('#title').val($(e.target).data('title'));
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>



<ul id="slide-out" class="side-nav">
  <input type="text" id="title" name="title" value="my Title">
</ul>

<a href="#" data-activates="slide-out" class="button-collapse" data-title="Option one title">Option 1</a>
<a href="#" data-activates="slide-out" class="button-collapse" data-title="Option two title">Option 2</a>

Materialise CSS - 将数据传递给 sideNav

Materialize CSS - passing data to sideNav

html

javascript

css

jquery

materialize