点击事件触发问题：历史搜索列表项无法触发城市值获取函数

Hey Dan, great question! The issue here is that your current click event only targets the submit button—your history list items aren't wired up to run the same logic. Let's fix this by refactoring your code to reuse the core functionality, and then bind it to both the button and your history items.

Step 1: Extract the Shared Logic into a Reusable Function #

First, let's take the code that handles the city selection and put it into its own function. This way, both the button and history items can call it without duplicating code:

function processCitySelection(selectedCity) {
  // Put all your existing logic here that uses the city value
  console.log("Processing city:", selectedCity);
  
  // Example actions you might want to run:
  // 1. Update the input field with the selected city (optional)
  $(".city").val(selectedCity);
  // 2. Submit a request, update the UI, etc.
  // ... your existing code here ...
}

Step 2: Update the Button Click Event #

Modify your original button click handler to call this new function instead of having inline logic:

$('.submitLocation').click(function(){ 
    var city = $(".city").val().trim(); // Trim to remove extra spaces
    if (city) { // Optional: add a check to avoid empty values
        processCitySelection(city);
    }
});

Step 3: Bind the Function to Your History List Items #

How you do this depends on whether your history items are static (loaded with the page) or dynamic (added after page load, like via AJAX or user searches):

For Static History Items

If your history list exists when the page loads, bind the click event directly to the items:

// Replace .history-item with the actual class of your list items
$('.history-item').click(function(){
    var city = $(this).text().trim(); // Get the city name from the list item
    processCitySelection(city);
});

For Dynamic History Items

If your history items are added dynamically (after the initial page load), direct event binding won't work. Use event delegation by attaching the event to a parent container that exists on page load:

// Replace .history-container with the parent element of your history items
$('.history-container').on('click', '.history-item', function(){
    var city = $(this).text().trim();
    processCitySelection(city);
});

Example HTML for History List #

Just to make sure we're on the same page, here's what your history list might look like (adjust classes to match your code):

<!-- Parent container for history items -->
<div class="history-container">
  <div class="history-item">Paris</div>
  <div class="history-item">Sydney</div>
  <div class="history-item">Berlin</div>
</div>

Key Notes #

• Always use .trim() to clean up any extra whitespace from user input or list item text.
• Adding a check for empty city values (like in the button handler) prevents unnecessary processing.
• Event delegation is crucial for dynamic content because it listens for events bubbling up from child elements, even if they're added later.

内容的提问来源于stack exchange，提问作者Dan