使用Thymeleaf遍历通过div输出值时，获取div中input框中的值

最近在做H5页面的app动作，为了和原生app没有太大差距，要求点击最外层的div就可以跳转到详情页。
上HTML代码

        <div class="row" th:each="item : ${list}">
            <input type="hidden" th:value="${item.id}" class="details_id">
            <div >
                <div >区划：
                    <span th:text="${item.area}" >1</span>
                </div>
            </div>  
                <div>记录人：
                    <span th:text="${item.recorder}">2</span>
                </div>
            </div>
            <div>记录时间：
                <span th:text="${#dates.format(item.addTime,'yyyy-MM-dd HH:mm')}">3</span>
            </div>
            <div>问题描述：
                <span th:text="${item.problemStatement}">4</span>
            </div>
        </div>

效果图如下： 白色div即为整个数据显示区域。点击任意地方都可以跳转。

之前各种搜索没有找到有相关方法，在此记录。

$(document).on('click', '.row', function () {
        var varl = $(this).find('.details_id').val();
        console.log("id值为"+ varl);
    // 写你的业务流程，拿到id你要进行的操作
    })

.row指最外层div的class属性，function为执行函数，
this指的就是点击的,.details_id则是input的class属性
.val()则是获取input的值

说明：此处引入jQuery on() 函数

• on()函数用于为指定元素的一个或多个事件绑定事件处理函数。
• 从jQuery1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
• on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。
• 此外，该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

on: function (types, selector, data, fn,one) 
types：即你的动作类型，一个或多个用空格分隔的事件类型
selector：[可选]选择器（id选择器还是 类选择器，还是name选择器）用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data：[可选] 传递给事件处理函数的任意数据。
fn：Function类型指定的事件处理函数。

结果

controller代码：

@CrossOrigin
@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafController {
    @Autowired
    AppService appService;

    @RequestMapping(value = "/index", method = RequestMethod.GET)
    public String index(Model mv) {
        List<Feld> list = appService.queryAll();
        mv.addAttribute("list", list);
        return "index";
    }
 }   

参考教程